I do a WordPress blog. There is a conclusion of posts, but at the expense of a picture, a title, a preview of all the blocks in a line of different height, and this is striking. I can not find a way to align them. Shoveled a few ways to css.

  1. Turned out to be not working

    .row { display: table; div { display: table-cell; } }

  2. With the use of flex, but bs is not friendly with him, after using it all the blocks are in a row and the grid system does not work.

     .equal, .equal > div[class*='col-'] { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex:1 0 auto; }

  3. Implemented in jq. Turned out to be working but with one BUT. Pictures from the blog are loaded a little late and the height of the jq block is first taken without them, but then the pictures appear and drop the post name and preview of the post (the block has a small height).

     var highestBox = 0; jQuery('.content__block').each(function(){ if(jQuery(this).height() > highestBox) { highestBox = jQuery(this).height(); //нахожу высоту самого высокого блока } }); jQuery('.content__block').height(highestBox); //ставлю высоту самого высокого блока всем блокам

    In the first picture jq worked correctly, but this happens 1 to 5. enter image description here The second showed a bug. enter image description here

Is it possible to fix the bug with jq or is there some way to css?

PS I have one block with the class .row , and inside it all the blocks with the classes .col-*

1 answer 1

If during flexbox you managed to align the blocks to the height, then to return the grid system, add to the container

 flex-wrap: wrap;

Ps : here is the full flexbox documentation

  • one
    thanks helped! - Alexander Alekseev