单纯的只有一层的话很简单好写,display:table也可以,以下为 li (只是个例子标签,不重要)下面多个几层还能实现其它自适应,小细节忽略
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.wt50{
width:50%;
}
.wd135{
width:135px;
}
.wdfu135{
width:calc(100% - 135px);
}
.auto-list{
border: 1px solid #eae7e7;
min-height: 42px;
display: flex;
align-items: stretch;
display: -ms-flexbox;
-ms-flex-align: stretch;
width: 100%;
}
.auto-list>li{
float: left;
border-right: 1px solid #eae7e7;
display: flex;
align-items: stretch;
display: -ms-flexbox;
-ms-flex-align: stretch;
}
.auto-list>li .flex-item{
min-height: 100%;
max-width: 100%;
display: flex;
align-items: stretch;
display: -ms-flexbox;
-ms-flex-align: stretch;
}
.auto-list>li .cen-tag{
width: 100%;
word-break: break-all;
}
.auto-list .f-item{
font-size: 15px;
font-weight: bold;
border-right: 1px solid #eae7e7;
float: left;
line-height: 20px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
display: -ms-flexbox;
-ms-flex-pack: center;
-ms-flex-align: center;
min-height: 41px;
}
<div style="padding: 50px;">
<ul class="auto-list">
<li class="wt50">
<div class="f-item wd135">
<div class="cen-tag">
测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
</div>
</div>
<div class="f-item wdfu135">
<div class="cen-tag">
测试文字测试文字测试文字测试文字测试文字测试文字测试文字
</div>
</div>
</li>
<li class="wt50">
<div class="f-item wd135">
<div class="cen-tag">
测试文字测试文字测试文字测试文字测试文字
</div>
</div>
<div class="f-item wdfu135">
<div class="cen-tag">
测试文字测试文字测试文字测试文字测试文字测试文字测试文字
</div>
</div>
</li>
</ul>
<ul class="auto-list">
<li class="wt50">
<div class="f-item wd135">
<div class="cen-tag">
测试文字测试文字测试文字测试文字测试文字测试文字
</div>
</div>
<div class="f-item wdfu135">
<div class="cen-tag">
测试文字测试文字测试文字测试文字测试文字测试文字测试文字
</div>
</div>
</li>
<li class="wt50">
<div class="f-item wd135">
<div class="cen-tag">
测试文字测试文字测试文字测试文字测试文字测试文字测试文字
</div>
</div>
<div class="f-item wdfu135">
<div class="cen-tag">
测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
</div>
</div>
</li>
</ul>
</div>