极客观点
项目管理
HarmonyOS
<template>
<div id="container">
<div style="height:1740px;">
<div id="right">
<div id="header">
<div class="border">
<p>我的总积分：<span>30</span>分</p>
</div>
<div class="border">
<p>我的总积分：<span>30</span>分</p>
</div>
<div class="border">
<p>我的总积分：<span>30</span>分</p>
</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">
<p>68%</p>
<p>已达</p>
</div>
<div class="line1"></div>
<div class="smallPart">
<p>￥2000</p>
<p>已筹</p>
</div>
<div class="line2"></div>
<div class="smallPart">
<p>68%</p>
<p>剩余时间</p>
</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">积分细则说明：</p><br>
<p>1、积分数值：人民币数值=0.5:1（暂定）</p><br>
<p>2、积分获得渠道：</p>
<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>
<p>X是指该用户认领该物种的金额（元）；</p>
<p>Y 是指该物种众筹结束时的总金额；如发生多期众筹，则为该物种多期众筹结束时的筹款金额总和；</p>
<p>Z是指该物种数据共享产生的资金收益（元）；</p>
<p>a 用户对物种百科进行编辑，并通过审核认定有效后，LPP根据内容情况对该用户分配相应积分，积分数值为1-100分；</p>
<p>b 用户提交自主撰写的科普文章并通过审核后获得积分；已在网站上发布对科普文章所有权归该用户与LPP共同所有；LPP可在其它渠道发布和使用该文章；用户依法对其发布的任何信息承担全部责任，LPP不对此承担任何法律责任；</p>
<p>c 捐赠样本的积分将在样本通过审核后即时分配给样本捐赠者；</p>
</div>
</div>
</div>
</div>
</template>
<script>
</script>
<style scoped>
#container{
box-sizing: border-box;
height: 1700px;
}
*{
margin: 0;
padding: 0;
}
#right{
width: 860px;
height: 880px;
margin-left: 220px;
}
#header{
margin: 0 auto;
width: 530px;
padding-top: 30px
}
#header .border{
width: 150px;
height: 38px;
display: inline-block;
border: 1px solid black;
border-radius: 20px;
margin-right: 20px
}
.border p{
padding-top: 8px
}
#filter{
margin-top: 50px;
}
table{
width: 880px;
border: 1px solid #f7f8fa;
margin-top: 38px;
border-collapse: collapse;
border-spacing: 0;
}
thead tr{
height: 56px;
background-color: #f7f8fa;
}
th{
font-weight: normal;
font-size: 13px;
color: #646465;
}
th:first-child{
width: 340px;
}
th:last-child{
width: 130px;
}
td{
border: 1px #646465 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: #666666;
}
.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: #646465
}
.line1{
position: relative;
left: 36px;
top: 3px
}
.line2{
position: relative;
left: 86px;
top: 3px
}
#button{
margin-left: 340px;
margin-top: 300px;
width: 200px;
height: 60px;
}
#title{
color: red;
font-size: 20px;
}
table{
width: 860px
}
#rules table td{
height: 20px;
}
</style>
这个是我做的效果，理想效果是红框内的三个小模块是并排显示
html5
在你的代码基础上弄出来修改了个demo：
点击查看
如下图所示：
div.line1和div.line2做的右边的短线效果，没必要专门弄个div啊，用border就可以啊。还有，你写的每个
div.smallPart里面对应的字，那么显示的东西宽度不同，你要根据实际来确定宽度，不要有的不够，有的太宽了，他们的父元素div.bigPart的宽度一定要能放下三个子元素，否则会撑下去的，而你用float：left的话父元素宽度不够了就会是像你的效果那样飘走了。。还有，干嘛要用
p标签，又不是长篇幅好几行的大段落，你这里显示的已达、数字等都是短小的文字，用span就可以了。