Geek Answers Handbook

How to ignore embedded block fields with different heights?

I have a problem when the stack blocks are at 2, and the next 2 blocks start at the end of the first two blocks. As shown in this JSFiddle demo .

HTML:

<div class="container"> <div class="inline"> A div with less content than that one > </div> <div class="inline"> A div with more content than the one on the left. Now Inline 3 goes down to where this div ends. I want to move it up however, so it right under the div that above Inline 3. </div> <div class="inline"> Inline 3 </div> <div class="inline"> Inline 4 </div> </div>

CSS

 .container { width:600px; background-color:rgb(40,40,40); } .inline { width:calc(50% - 22px); display:inline-block; vertical-align:top; color:white; background-color:#e74c3c; text-align:center; margin:5px 10px; }

Output:

Output

Note. It does not take up the space created by the top right div.

Expected / Desired Conclusion :

Expected Result

Note. . It uses spaces.

I know this is possible with two columns, but I don't want to use 2 columns. Because I have to be able to remove some div without having unequal content in the columns.

+6
source share
3 answers

I had the same issue on the website I created. I used brickwork to solve this problem: http://masonry.desandro.com/

+1
source

you can try using the column-count property,

Be aware that items will be ordered in descending column order.

fiddle

0
source

Make a div with lots of float content on the right, adding a second class to it.

HTML

 <div class="inline right"> A div with more content than the one on the left. Now Inline 3 goes down to where this div ends. I want to move it up however, so it right under the div that above Inline 3. </div>

CSS

 .right { float: right; }

fiddle

0
source

More articles:


All Articles