Is there any universal way to align the blocks to the height of the highest block? enter image description here

I use bootstrap, and he is not friendly with flex, the table is also not an option. I make a topic on wordpress, for this immediately the question can somehow limit the user who uploads the content (limited size of the picture, fixed length of the article (preview), limited length of the title), and is this correct?

  • one
    why bootstrap is not friendly with flex? If you are unable to do something due to the nature of your project, please attach the reproducible code of what you want to change. - Alexey Prokopenko

2 answers 2

Blocks are aligned through display: table and display: table-cell See an example. And in the example you can replace vertical-aligh: top with vertical-align: middle. And the blocks are aligned in the middle of the vertical.

<div style="width: 100%; display: table;"> <div style="width: 50%; display: table-cell; background: red; vertical-align: top;"> <p>left header</p> </div> <div style="width: 50%; display: table-cell; background: yellow; vertical-align: top;"> <p>right header</p> <p>line1</p> <p>line2</p> <p>line3</p> </div> </div>

You can cut off part of the displayed content as Wordpress itself:

 function my_content( $content ){ // сделать все что угодно здесь с $content, обрезать например return $content; } add_filter('the_content', 'my_content');

(there are also the_excerpt, excerpt_length ... filters) as well as with css tools. For the contents of the "color blocks" you need to wrap in another div with about css like this:

 max-height: 3em; overflow: hidden;

    There is an old hack for emulating single columns using a border or a variant using javascript / jQuery:

    HTML:

     <div style="height:350px;" class="column"></div> <div class="column"></div>

    CSS:

     .column { float: left; width: 200px; }

    jQuery:

     var max_height = 0; $("div.column").each(function(){ if ($(this).height() > max_height) { max_height = $(this).height(); } }); $("div.column").height(max_height);