如何使多行内联块显示得很好

Question

假设我的网站上有此结构：

.elem {
  display: inline-block;
  border: 2px dotted blue;
  float: left;
}

<div>
  <div class="elem">Some content on 1 line</div>
  <div class="elem">Some content on 3 lines<br>second line<br>third line</div>
  <div class="elem">Some content on 2 lines<br>second line</div>
  <div class="elem">Some content2 on 3 lines<br>second line<br>third line</div>
  <div class="elem">Some content2 on 3 lines<br>second line<br>third line</div>
  <div class="elem">Some content2 on 3 lines<br>second line<br>third line</div>
</div>

这是它的样子：

假设浏览器足够大，因此每列中可以有3个div。我希望第四个div出现在第一列和第二行。我不知道各个div的大小（在高度上，我可以稍后设置宽度），因此我无法将高度硬编码到每个div中。

我该怎么做才能使它们对齐？任何帮助将不胜感激。

Answer 1

您可以使用flex来获得想要的结果。

.content {
    display: flex;
    flex-flow: row wrap;
}

.elem {
    border: 2px dotted blue;
    width: 200px;
    height: auto;
  }

<div class="content">
    <div class="elem">Some content on 1 line</div>
    <div class="elem">Some content on 3 lines<br>second line<br>third line</div>
    <div class="elem">Some content on 2 lines<br>second line</div>
    <div class="elem">Some content2 on 3 lines<br>second line<br>third line</div>
    <div class="elem">Some content2 on 3 lines<br>second line<br>third line</div>
    <div class="elem">Some content2 on 3 lines<br>second line<br>third line</div>
</div>

Answer 2

您可以像这样尝试inline-flex，

.elem {
  border: 2px dotted blue;
  display: inline-flex;
 }

<div>
  <div class="elem">Some content on 1 line</div>
  <div class="elem">Some content on 3 lines<br>second line<br>third line</div>
  <div class="elem">Some content on 2 lines<br>second line</div>
  <div class="elem">Some content2 on 3 lines<br>second line<br>third line</div>
  <div class="elem">Some content2 on 3 lines<br>second line<br>third line</div>
  <div class="elem">Some content2 on 3 lines<br>second line<br>third line</div>
</div>