1

我有一个包含三个项目（li's）的列表。我希望该列表中剩余的两个 li 与该列表中的最高项目具有相同的高度。我怎么能用 CSS 做到这一点？

示例：http ://codepen.io/seraphzz/pen/EJFpd

谢谢！

4

2 回答 2

4

用于display: table-cell获取类似布局的表格：

.box-page-ul {
  border-collapse: separate;
  margin-bottom: 20px;
}
.box-page-ul li {
  background-color: #60615c;
  padding: 20px;
  border: 10px solid white;
  width: 294px; 
  display: table-cell;
}

您的限制是您不能再使用边距来分隔li元素，而且它们不会像使用float. 如果你需要这些，那么你将不得不求助于 JavaScript，或者等到CSS Flexbox成熟。

于 2013-06-05T18:11:39.673 回答
2

利用：

display: table-cell;

在这里摆弄您更正的代码http://jsfiddle.net/rwxdp/

于 2013-06-05T18:14:43.547 回答