两列布局:
效果图:
方法一:
html代码:
<div class="list-box">
<div
class="item-box"
v-for="(item, index) in detailInfo"
:key="index"
>
<div class="item">
<div class="label">名称</div>
<div class="value">值</div>
</div>
</div>
<div class="clear"></div>
</div>
css代码:
.list-box {
.item-box {
font-size: 14px;
margin-bottom: 10px;
float: left;
box-sizing: border-box;
width: 50%;
.clear {
clear: both;
}
.item {
display: flex;
}
&:last-child {
margin-bottom: 0;
}
.label {
width: 76px;
color: #89d1de;
}
}
}
方法二:
html 代码:
<div
v-for="(item, index) in detailInfo"
:key="index"
class="panel-box"
>
<div class="panel-item">
<div class="label">{{ item.label }}</div>
<div class="value">{{ item.value }}</div>
</div>
</div>
css代码:
.panel-box {
width: 50%;
display: inline-block;
font-size: 14px;
.panel-item {
width: 100%;
position: relative;
display: flex;
margin-bottom: 10px;
.label {
width: 76px;
color: #89d1de;
}
}
}
参考1:
http://t.zoukankan.com/tianma3798-p-14317544.html
参考2:
https://blog.csdn.net/ann295258232/article/details/104846362
参考3:
https://blog.csdn.net/ann295258232/article/details/104846362