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

最新推荐文章于 2024-07-25 16:17:30 发布

原创最新推荐文章于 2024-07-25 16:17:30 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#table布局

table布局专栏收录该内容

0 篇文章

订阅专栏

本文介绍了一种使用CSS将内容布局为表格的方式，通过设置display属性实现水平和垂直对齐。每个单元格都设定了宽度并应用了不同的背景颜色以便区分。

<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;
}

效果图: