Dense packing of floating div vertically

Question

Regular floating divs are lined up with the height of the tallest element. Like this:

Google+ makes the layout much smaller and more beautiful. Like this:

How can you ensure that the blocks are tightened up, filling the space tighter? It is desirable - without dynamic calculation of the boundaries of each element and absolute positioning.

Answer 1 · 2016-01-08T21:43:20

It is worth thinking either about the uniformity of blocks in height, or split them into several columns and fill them with blocks, or you can try one to the left, others to the right ... Most likely, the second screen has three columns .... You can also use property margin collapse and set the lower indents of the blocks .... (but this is for a small height runoff ...)

Approximately here I added a variant with columns:

#wrapper{ width:770px; outline:1px solid #9F00BF; } #cols1{ width:250px; float:left; margin:0; } #cols2{ width:250px; margin: 5px 260px; } #cols3{ width:250px; float:right; margin:0; } .a4{ width:245px; height:150px; background:#66f; margin:5px; } .a5{ width:245px; height:100px; background:#66f; margin:5px; } .a6{ width:245px; height:150px; background:#66f; margin:5px; } .a7{ width:245px; height:125px; background:#66f; margin:5px; }

 <div id="wrapper"> <div id="cols1"> <div class="a4"></div> <div class="a6"></div> <div class="a5"></div> <div class="a7"></div> </div> <div id="cols3"> <div class="a5"></div> <div class="a4"></div> <div class="a6"></div> <div class="a7"></div> </div> <div id="cols2"> <div class="a4"></div> <div class="a7"></div> <div class="a6"></div> <div class="a5"></div> </div> </div>

The common thing in the two screens is that the width of the blocks on each of them is the same.
But in the second screenshot, they, like an inverted Tetris, fall into empty space.
blocks with the properties of float behave this way when lining up: each next takes the upper edge along the lower previous one and if it encounters a block longer in its path then it will rest against it .... from here read above how to deal with it.
And yet, I believe that the most effective way is to use a column layout.
Create several blocks of the entire page, arrange them in columns and fill with blocks.
And in my logic, they are filled in as lines in the book: from left to right.
Just with three columns, if something bulges into the second, it does not rest on it, but bypasses and rises into the first.
And in the version with columns, they will be filled in turn, and when implementing the "infinite" scrolling, the logic will be completely lost.
And if one simply inserts one by one into three columns, as if arranging the lines, it may happen that the first one gets three blocks with a height of 200px, and the third one gets 50px each, from which the logic of the lines also completely disappears.
No, they will not bypass ... so it is arranged by default that will rest against .....

Answer 2 · 2016-01-08T22:06:22

Not found anywhere CSS / HTML solutions. I would be grateful if someone tells. But there is such an option on jQuery: http://masonry.desandro.com/

The final result:

Sergey Gazizov

86 6 bronze marks

To supplement your question, please use the edit option. The “Post Reply” button should only be used for comprehensive answers to questions. - From the queue of checks - LEQADA
Probably incorrectly formulated: for me, this is the final solution that I am currently using. - Sergey Gazizov
one
But this is my question. And for me this is a found solution, i.e. answer to the question. And this decision may be useful to someone. If you think that this answer does not correspond to your inner values, I can delete it. - Sergey Gazizov

|

user185447 1,180 2 gold marks 12 silver marks 43 bronze marks · Answer 3 · 2016-01-09T14:22:50

Let the blocks, the set of blocks we conclude in one div, with a fixed width of 80%. Further, in the styles of each of the small blocks to register inside

display: block; height: 100px width: 30%; float: none

Like this.

 .Osnovnoiblock{width:80%;} .Malyiblock{display: block; height:100px width:30%; float:left; border:1px solid #000000;} .text{width:100px;}

 <div class="Osnovnoiblock"><div class="Malyiblock"><div class="title">Заголовок</div><div class="text">Текст в блоке под заголовком</div></div><div class="Malyiblock"><div class="title">Заголовок</div><div class="text">Текст в блоке под заголовком</div></div><div class="Malyiblock"><div class="title">Заголовок</div><div class="text">Текст в блоке под заголовком</div></div><div class="Malyiblock"><div class="title">Заголовок</div><div class="text">Текст в блоке под заголовком</div></div><div class="Malyiblock"><div class="title">Заголовок</div><div class="text">Текст в блоке под заголовком</div></div><div class="Malyiblock"><div class="title">Заголовок</div><div class="text">Текст в блоке под заголовком</div></div><div class="Malyiblock"><div class="title">Заголовок</div><div class="text">Текст в блоке под заголовком</div></div><div class="Malyiblock"><div class="title">Заголовок</div><div class="text">Текст в блоке под заголовком</div></div><div class="Malyiblock"><div class="title">Заголовок</div><div class="text">Текст в блоке под заголовком</div></div><div class="Malyiblock"><div class="title">Заголовок</div><div class="text">Текст в блоке под заголовком</div></div><div class="Malyiblock"><div class="title">Заголовок</div><div class="text">Текст в блоке под заголовком</div></div><div class="Malyiblock"><div class="title">Заголовок</div><div class="text">Текст в блоке под заголовком</div></div><div class="Malyiblock"><div class="title">Заголовок</div><div class="text">Текст в блоке под заголовком</div></div><div class="Malyiblock"><div class="title">Заголовок</div><div class="text">Текст в блоке под заголовком</div></div><div class="Malyiblock"><div class="title">Заголовок</div><div class="text">Текст в блоке под заголовком</div></div><div class="Malyiblock"><div class="title">Заголовок</div><div class="text">Текст в блоке под заголовком</div></div><div class="Malyiblock"><div class="title">Заголовок</div><div class="text">Текст в блоке под заголовком</div></div></div>

Css:

 .Osnovnoi block{width:80%;} .Malyi block{display: block; height:100px width:30%; float:none}

How will the table behave?

Answer 4 · 2017-01-30T21:01:20

Option 1:

 .flexboxes { display: flex; flex-wrap: wrap; height:200px; flex-direction: column; } .flexboxes > div {width:200px;background-color:red;margin:3px;} .block0 {height: 60px;} .block1 {height: 80px;} .block2 {height: 70px;} .block3 {height: 90px;} .block4 {height: 80px;} .block5 {height: 100px;}

 <div class="flexboxes"> <div class="block0"></div> <div class="block1"></div> <div class="block2"></div> <div class="block3"></div> <div class="block4"></div> <div class="block5"></div> </div>

Option 2 (using scripts):

 $(function() { $('.flexboxes').masonry({ itemSelector: 'div' // обращаемся к пунктам }); });

 .flexboxes { display: flex; flex-wrap: wrap; height:200px; width: 630px; } .flexboxes > div {width:200px;background-color:red;margin:3px;} .block0 {height: 60px;} .block1 {height: 80px;} .block2 {height: 70px;} .block3 {height: 90px;} .block4 {height: 80px;} .block5 {height: 100px;}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://masonry.desandro.com/masonry.pkgd.js"></script> <div class="flexboxes"> <div class="block0"></div> <div class="block2"></div> <div class="block4"></div> <div class="block1"></div> <div class="block3"></div> <div class="block5"></div> </div>

I myself use masonry for the gallery, I support the second option) But on css-tricks, a hack is used with inline elements inside the standard markup of the text column display.
The method is good for everyone, but pay attention to the numbering, it goes, in fact, as befits a column display method ... So the choice is in the context of use, and the choice remains of two - this hack or masonry script.

Dense packing of floating div vertically

4 answers 4

More articles: