具有CSS的等高列

Question

具有CSS的等高列

我想用百分比作为我的CSS表。不幸的是，这对我不起作用。

这个密码怎么了？我应该用柔性箱代替桌子吗？

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

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

下面是一个使用ul/li元素，2列使用百分比并具有相同的高度。由于表更喜欢表/行/单元格布局，所以我对html做了一些调整。* {&nbsp; &nbsp; margin: 0;}html, body {&nbsp; &nbsp; height: 100%;}.table {&nbsp; display: table;&nbsp; width: 90%;&nbsp; height: 60%;&nbsp; padding-top: 5%;&nbsp; margin: 0 auto;}ul {&nbsp; display: table-row;&nbsp; list-style: none;&nbsp; margin: 0;}li {&nbsp; display: table-cell;&nbsp; width: 50%;&nbsp; border: 1px solid #999;}<div class="table">&nbsp; <ul>&nbsp; &nbsp; <li>1</li>&nbsp; &nbsp; <li>2</li>&nbsp; </ul>&nbsp; <ul>&nbsp; &nbsp; <li>3</li>&nbsp; &nbsp; <li>4</li>&nbsp; </ul>&nbsp; <ul>&nbsp; &nbsp; <li>5</li>&nbsp; &nbsp; <li>6</li>&nbsp; </ul></div>

Answer 2

具有Flexbox的等高柱HTML<ul>   <li>1</li>   <li>2</li>   <li>3</li>   <li>4</li>   <li>5</li>   <li>6</li></ul>CSSul { display: flex; }使用上面的简单代码，您可以将任意数量的内容放入列表项中，并且所有列表项都具有相同的高度。演示注：Flex容器的初始设置为flex-direction: row，这意味着子元素(也称为Flex项)将水平排列。Flex容器的另一个初始设置是align-items: stretch，这将导致挠曲项展开完整的高度(或宽度，取决于flex-direction)，容器的。以上两个设置一起创建等高列。弹性等高列只适用于兄弟姐妹。将高度应用于FLEX项将覆盖等高功能。等高列仅适用于同一行上的挠曲项。.如何禁用Flexbox中的等高列？

Answer 3

我对这个问题的解释提出了一个答案，这个问题不同于@michael_B，最初的风格是width: 50%;在li元素，我认为所期望的结果是将6个列表项流成2列3行。这种情况不能很容易地使用CSS表解决，但是使用Flexbox相对简单。ul {&nbsp; list-style: none;&nbsp; margin: 0;&nbsp; width: 100%;&nbsp; /*kills the irritating intial padding on uls in webkit*/&nbsp; -webkit-padding-start: 0;&nbsp; display: flex;&nbsp; flex-flow: row wrap;&nbsp; /*stretch is the default value, but it will force items to stretch to match others in their row*/&nbsp; align-items: stretch;&nbsp; /*below properties just emphasize the layout*/&nbsp; padding: 2px;&nbsp; background-color: green;}li {&nbsp; /*forces border-width and padding to be part of the declared with (50% in this case)*/&nbsp; box-sizing: border-box;&nbsp; width: 50%;&nbsp; /*list-item, inline-block, and block work equally well*/&nbsp; display: list-item;&nbsp; /*below properties just emphasize the layout*/&nbsp; border: white 2px solid;&nbsp; background-color: lightgreen;}/*I set this property to show what happens if 1 item has a different height*/li:nth-child(3) {&nbsp; height: 40px;}<ul>&nbsp; <li>1</li>&nbsp; <li>2</li>&nbsp; <li>3</li>&nbsp; <li>4</li>&nbsp; <li>5</li>&nbsp; <li>6</li></ul>