具有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做了一些调整。

* {

    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 2

具有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; }

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

演示

---

注：

• 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 {

  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>