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

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允许li根据内容转到下一行

3. justify-content: center执行水平居中。

4. 垂直li有一个名为align-items: stretch的属性，这是默认属性 - 这允许li s的高度在一行中相等。

见下面的演示：

＆＃13;
＆＃13;
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;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 2

轻松使用display: flex。 在flex-flow: row wrap;中指定方向+包裹，在justify-content: center;

中指定中心对齐方式

示例：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;