display:teble 布局. 实现内容高度不一致,但li标签保持一致的高度.
程序员文章站
2022-04-29 08:53:10
...
<div id="wrap">
<p id="p1">11111111111</p>
<p id="p2">222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</p>
<p id="p3">33333333333</p>
</div>
#wrap {
display:table;
border: 1px solid green;
}
p {
display:table-cell;
width: 100px;
word-break: break-all;
vertical-align: top; //重点需要加这个,不然内容会垂直居中非常难看
}
#p1 {
background: red;
}
#p2 {
background: orange;
}
#p3 {
background: blue;
}
效果图:
上一篇: ps怎么抠图换背景教程