欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

display:teble 布局. 实现内容高度不一致,但li标签保持一致的高度.

程序员文章站 2022-04-29 08:53:10
...
display:teble 布局. 实现内容高度不一致,但li标签保持一致的高度.
<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;
}

效果图: 

display:teble 布局. 实现内容高度不一致,但li标签保持一致的高度.

 

相关标签: table布局