我想对我的 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>
带 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 http://jsfiddle.net/yuwqsrab/18/
Notes:
Flex 容器的初始设置是flex-direction: row https://www.w3.org/TR/css-flexbox-1/#flex-direction-property，这意味着子元素（又名弹性项目）将水平排列。
Flex 容器的另一个初始设置是align-items: stretch https://www.w3.org/TR/css-flexbox-1/#align-items-property，这会导致弹性项目扩展整个高度（或宽度，具体取决于flex-direction），容器的。
上面的两个设置一起创建等高的列。
Flex 等高列仅适用于同级列。
将高度应用于弹性项目会覆盖等高功能。
等高列仅适用于同一行上的弹性项目 https://stackoverflow.com/q/36004926/3597276.
如何禁用 Flexbox 中的等高列？ https://stackoverflow.com/q/33034660/3597276
浏览器支持： 所有主流浏览器都支持 Flexbox，IE 。一些最新的浏览器版本，例如 Safari 8 和 IE10，需要 http://caniuse.com/#search=flex供应商前缀 https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix。要快速添加前缀，请使用自动前缀器 https://autoprefixer.github.io/。更多详情请参阅这个答案 https://stackoverflow.com/a/35137869/3597276.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
