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

Question

我可以在没有JS和min-height的情况下做所有相同高度的块吗（作为一种特殊情况）？块可以放在多行上。

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 设为 wrapping flexbox.

这是如何工作的？

display: flex 创建一个 flexbox，它有属性以各种方式在其子项之间分配空白。
flex-wrap: wrap 允许 li 根据内容转到下一行
justify-content: center水平居中
在垂直方向上 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>

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>

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

Inline-block elements of the same height in a few lines

html

css

vertical-alignment