<div class="card">
<div class="item">
<div class="item-label">研究条目研究条目研究条目</div>
<div class="item-value">市桥人寂寂,古寺竹苍苍。 鹳鹤来何处,号鸣满夕阳。</div>
</div>
<div class="item">
<div class="item-label">研究条目</div>
<div class="item-value">移舟水溅差差绿,倚槛风摆柄柄香。</div>
</div>
<div class="item">
<div class="item-label">研究条目</div>
<div class="item-value">移舟水溅差差绿。</div>
</div>
<div class="item">
<div class="item-label">研究条目</div>
<div class="item-value">市桥人寂寂,古寺竹苍苍。 鹳鹤来何处,号鸣满夕阳。</div>
</div>
<div class="item">
<div class="item-label">研究条目</div>
<div class="item-value">移舟水溅差差绿,倚槛风摆柄柄香。</div>
</div>
</div>
<style>
div {
box-sizing: border-box;
}
.card {
width: 800px;
padding: 16px;
border: 1px solid #ccc;
display: flex;
flex-wrap: wrap;
}
.item {
display: flex;
margin-bottom: 16px;
}
.item:nth-child(2n - 1) {
width: 40%;
margin-right: 60px;
}
.item:nth-child(2n) {
flex: 1;
}
.item:last-child {
margin-bottom: 0;
}
.item-label {
width: 100px;
font-weight: bold;
margin-right: 20px;
text-align: justify;
word-break: break-all;
}
.item-value {
flex: 1;
text-align: justify;
word-break: break-all;
}
</style>
css 卡片(label-value排版)
最新推荐文章于 2024-04-12 10:14:17 发布