How to make inline blocks on multiple lines display nicely

Question

Let's say that I have this structure on my website:

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

Here is what it looks like:

Let's say that the browser is big enough so there can be 3 divs in each column. I want the 4th div to appear on the first column and on the second row. I don't know how big the individual divs might be (in height, I can set the width later on) so I can't hardcode a height into each divs.

How can I do this so they would align? Any help would be appreciated.

1

Use flex instead of floats – Justinas Aug 28 '18 at 07:36

Manuel Reyes · Answer 1 · 2018-08-28T08:12:02.557

You can play with flex to get the desired results.

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

score -1 · Accepted Answer · answered Aug 28 '18 at 07:42

You can try inline-flex like this,

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

How to make inline blocks on multiple lines display nicely

2 Answers2