使用 CSS 的等高列

Question

我想在我的 css 表中使用百分比。不幸的是，它对我不起作用。

这段代码有什么问题？我应该使用 flexbox 代替表格吗？

我想使用表格，因为我想要相同高度的列。

ul {
  list-style: none;
  margin: 0;
  display: table;
  table-layout: fixed;
  width: 100%;
}

li {
  width: 50%;
  display: table-cell;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

Answer 1

使用 Flexbox 的等高列

HTML

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

CSS

ul { display: flex; }

使用上面的简单代码，您可以在列表项中放置任意数量的内容，并且所有列表项的高度相同。

DEMO

---

注意事项：

• 弹性容器的初始设置是flex-direction: row，这意味着子元素（又名弹性项目）将水平排列。

• 弹性容器的另一个初始设置是align-items: stretch，它会导致弹性项目扩展容器的整个高度（或宽度，取决于flex-direction）。

• 以上两种设置共同创建高度相等的列。

• Flex 等高列仅适用于同级。

• 对弹性项目应用高度会覆盖等高功能。

• Equal height columns apply only to flex items on the same line.

• How to disable equal height columns in Flexbox?

---

浏览器支持： 所有主流浏览器都支持 Flexbox，except IE < 10。一些最新的浏览器版本，例如 Safari 8 和 IE10，需要vendor prefixes。要快速添加前缀，请使用Autoprefixer。更多详情this answer。

Answer 2

这是一个使用 ul/li 元素的示例，2 列使用百分比并且高度相等。

由于表格更喜欢表格/行/单元格布局，因此我对您的 html 进行了一些重组。

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.table {
  display: table;
  width: 90%;
  height: 60%;
  padding-top: 5%;
  margin: 0 auto;
}
ul {
  display: table-row;
  list-style: none;
  margin: 0;
}

li {
  display: table-cell;
  width: 50%;
  border: 1px solid #999;
}

<div class="table">
  <ul>
    <li>1</li>
    <li>2</li>
  </ul>
  <ul>
    <li>3</li>
    <li>4</li>
  </ul>
  <ul>
    <li>5</li>
    <li>6</li>
  </ul>
</div>

Answer 3

我对与@Michael_B 不同的问题的解释给出了答案。在li 元素上使用width: 50%; 的初始样式，我认为期望的结果是让六个列表项流入2 列和3 行。这种情况使用 CSS 表格无法轻易解决，但使用 flexbox 相对简单。

ul {
  list-style: none;
  margin: 0;
  width: 100%;
  /*kills the irritating intial padding on uls in webkit*/
  -webkit-padding-start: 0;
  display: flex;
  flex-flow: row wrap;
  /*stretch is the default value, but it will force items to stretch to match others in their row*/
  align-items: stretch;
  /*below properties just emphasize the layout*/
  padding: 2px;
  background-color: green;
}
li {
  /*forces border-width and padding to be part of the declared with (50% in this case)*/
  box-sizing: border-box;
  width: 50%;
  /*list-item, inline-block, and block work equally well*/
  display: list-item;
  /*below properties just emphasize the layout*/
  border: white 2px solid;
  background-color: lightgreen;
}
/*I set this property to show what happens if 1 item has a different height*/

li:nth-child(3) {
  height: 40px;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>