同一行内高度相同的inline-block元素

Question

是否可以在没有JS和min-height的情况下（作为特例）使所有块具有相同的高度？块可以放置在多行上。

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

- Alex

Answer 1

如果flexbox是一个选项，那么你可以将

变成一个 wrapping flexbox。

这是如何工作的？

1. display: flex创建一个flexbox，它具有在其子元素之间以各种方式分配空白的属性。

2. flex-wrap: wrap允许li根据内容转到下一行

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

4. 垂直方向上，li具有一个叫做align-items: stretch的属性，这是默认值 - 这允许li在同一行中高度相等。

请参见以下演示:

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>

- kukkuz

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>

- roberrrt-s