与CSS等高的列
我想为我的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>
这里是使用ul / li元素的示例，使用百分比的2列和高度相等。
由于表格更喜欢table / row / cell布局，所以我重构了一下你的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>
带有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项目）将水平排列。 -
flex容器的另一个初始设置是
align-items: stretch，这会导致Flex项目扩展容器的整个高度（或宽度，取决于flex-direction）。 -
上面的两个设置一起创build了等高的列。
-
Flex等高栏只适用于兄弟姐妹。
-
将高度应用于Flex项目会覆盖等高度function。
-
等高栏只应用于同一行上的弹性项目 。
-
如何在Flexbox中禁用相同高度的列？
浏览器支持： 除IE <10外 ，所有主stream浏览 器均支持 Flexbox。 一些最近的浏览器版本，如Safari 8和IE10，需要供应商前缀 。 要快速添加前缀，请使用Autoprefixer 。 在这个答案的更多细节。
我正在抛出一个解答与@Michael_B不同的问题的解答。 width: 50%;初始样式width: 50%; 在li元素上，我想要得到的结果是将六个列表项分成两列和三列。 使用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>
