CSS等高柱

Question

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

这段代码出了什么问题？我应该使用flexbox而不是table吗？

我想用表,因为我想要相同的高度列.

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容器的初始设置是flex-direction: row,这意味着子元素(也称为flex项)将水平排列.

• 柔性容器的另一个初始设置是align-items: stretch,使柔性物品扩展容器的整个高度(或宽度,取决于flex-direction).

• 以上两个设置一起创建相等的高度列.

• Flex等高度列仅适用于兄弟姐妹.

• 将高度应用于弹性项会覆盖相等高度的特征.

• 等高列仅适用于同一行上的弹性项目.

• 如何在Flexbox中禁用相等高度的列？

浏览器支持: 所有主流浏览器都支持 Flexbox,IE <10除外.最近的一些浏览器版本,例如Safari 8和IE10,需要供应商前缀.要快速添加前缀,请使用Autoprefixer.这个答案的更多细节.

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>