几行中相同高度的内联块元素

Question

我可以在没有JS和最小高度的情况下完成相同高度的所有块（作为特殊情况）吗？块可以放在多行上。

例子jsfiddle

ul {
  font-size: 0;
  max-width: 300px;
  text-align: center;
}

li {
  vertical-align: top;
  display: inline-block;
  width: 30%;
  margin: 1%;
  background: grey;
  font-size: 12px;
}

<ul>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
</ul>

Answer 1

如果flexbox是一个选项，那么你可以使ul包装flexbox。

这是怎么回事？

1. display: flex创建了一个flexbox，它具有以各种方式在其子节点之间分配空格的属性。
2. flex-wrap: wrap允许lis根据内容进入下一行
3. justify-content: center做横向居中。
4. 纵向lis有一个名为align-items: stretch的属性，这是默认值 - 这允许lis的高度在一条线上相等。

见下面的演示：

ul {
  font-size: 0;
  max-width: 300px;
  text-align: center;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
}

li {
  vertical-align: top;
  display: inline-block;
  width: 30%;
  margin: 1%;
  background: grey;
  font-size: 12px;
}

<ul>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
</ul>

Answer 2

很容易，使用display: flex。在flex-flow: row wrap;中指定方向+包裹，在justify-content: center;中指定中心对齐

例：

ul {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  font-size: 0;
  max-width: 300px;
  text-align: center;
}

li {
  vertical-align: top;
  display: inline-block;
  width: 30%;
  margin: 1%;
  background: grey;
  font-size: 12px;
}

<ul>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
</ul>