<template>
     <div id="container">
      <div style="height:1740px;">
        <div id="right">
          <div id="header">
            <div class="border">
              
:<span>30</span>
            </div>
            <div class="border">
              
:<span>30</span>
            </div>
            <div class="border">
              
:<span>30</span>
            </div>
          </div>
          <div id="filter">
            <el-button style="marginLeft:20px" plain round size="mini"></el-button>
            <el-button plain round size="mini"></el-button>
            <el-button plain round size="mini"></el-button>
            <el-button plain round size="mini"></el-button>
          </div>
          <table>
            <thead>
              <tr>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <img src="" class="pic">
                  <div class="info">
                    <div class="name"></div>
                    <div class="claimNum">:111</div>
                    <div class="bigPart">
                      <div class="smallPart">
                        
68%
                        

                      </div>
                      <div class="line1"></div>
                      <div class="smallPart">
                        
2000
                        

                      </div>
                      <div class="line2"></div>
                      <div class="smallPart">
                        
68%
                        

                      </div>
                    </div>
                  </div>
                </td>
                <td>1</td>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
              </tr>
            </tbody>
          </table>
          <!--  -->
          <a href="">
            <img id="button" src="../../assets/images/.png" alt="">
          </a>
          <div id="rules">
            <p id="title">:
<br>
            
1:=0.5:1
<br>
            
2:
            <table>
              <tr>
                <td></td>
                <td></td>
                <td></td>
              </tr>
              <tr>
                <td rowspan="5"></td>
                <td></td>
                <td>10</td>
              </tr>
              <tr>
                <td></td>
                <td>0.2X</td>
              </tr>
              <tr>
                <td></td>
                <td>0.15Z*X/Y</td>
              </tr>
              <tr>
                <td></td>
                <td>1-100</td>
              </tr>
              <tr>
                <td></td>
                <td>300</td>
              </tr>
              <tr>
                <td rowspan="6"></td>
                <td></td>
                <td>10</td>
              </tr>
              <tr>
                <td></td>
                <td>10</td>
              </tr>
              <tr>
                <td></td>
                <td>0.2X</td>
              </tr>
              <tr>
                <td></td>
                <td>0.15Z*X/Y</td>
              </tr>
              <tr>
                <td></td>
                <td>1-100</td>
              </tr>
              <tr>
                <td></td>
                <td>300</td>
              </tr>
            </table>
            
X;
            
Y ;;
            
Z;
            
a LPP1-100;
            
b ;LPP;LPP;LPP;
            
c ;
          </div>
        </div>
      </div>
    </div>

</template>

<script>

</script>

<style scoped>
-sharpcontainer{
  box-sizing: border-box;
  height: 1700px;
}
*{
  margin: 0;
  padding: 0;
}
-sharpright{
  width: 860px;
  height: 880px;
  margin-left: 220px;
}
-sharpheader{
  margin: 0 auto;
  width: 530px;
  padding-top: 30px
}
-sharpheader .border{
  width: 150px;
  height: 38px;
  display: inline-block;
  border: 1px solid black;
  border-radius: 20px;
  margin-right: 20px
}
.border p{
  padding-top: 8px
}
-sharpfilter{
  margin-top: 50px;
}
table{
  width: 880px;
  border: 1px solid -sharpf7f8fa;
  margin-top: 38px;
  border-collapse: collapse;
  border-spacing: 0;
}
thead tr{
  height: 56px;
  background-color: -sharpf7f8fa;
}
th{
  font-weight: normal;
  font-size: 13px;
  color: -sharp646465;
}
th:first-child{
  width: 340px;
}
th:last-child{
  width: 130px;
}
td{
  border: 1px -sharp646465 solid;
  height: 120px;
}
.pic{
  width:170px;
  height:100px;
  background-color:red
}
.pic,.info,.smallPart{
  float: left;
  font-size: 12px;
}
.info{
  width: 160px;
  height: 100px;
  margin-left: 8px
}
.name{
  font-size: 14px;
}
.claimNum,.smallPart p:last-of-type{
  color: -sharp666666;
}
.bigPart{
  width: 160px;
  height: 40px;
}
.smallPart{
  width: 50px;
  height: 40px;
  float: left;
}
.smallPart p{
  display: inline-block;
}
.name,.claimNum,.smallPart{
  margin-bottom:5px;
}
.line1,.line2{
  width: 1px;
  height: 28px;
  background-color: -sharp646465
}
.line1{
  position: relative;
  left: 36px;
  top: 3px
}
.line2{
  position: relative;
  left: 86px;
  top: 3px
}
-sharpbutton{
  margin-left: 340px;
  margin-top: 300px;
  width: 200px;
  height: 60px;
}
-sharptitle{
  color: red;
  font-size: 20px;
}
table{
  width: 860px
}
-sharprules table td{
  height: 20px;
}
</style>

this is my effect. The ideal effect is that the three small modules in the red box are displayed side by side