All geek questions in one place

String elements with the same height in multiple lines

Is it possible to make all blocks of the same height without JS and min-height (as a special case)? Blocks can be placed on multiple lines.

Jsfiddle example

Correct height

ul { font-size: 0; max-width: 300px; text-align: center; } li { vertical-align: top; display: inline-block; width: 30%; margin: 1%; background: grey; font-size: 12px; } 
 <ul> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> <li>Lorem ipsum dolor sit amet.</li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> </ul>
+6
source share
2 answers

If flexbox is an option, you can make ul flexbox wrapper.

How it works?

  • display: flex creates a flexbox that has the ability to distribute spaces between children in different ways.

  • flex-wrap: wrap allows li to go to the next line depending on the content

  • justify-content: center has horizontal centering.

  • Vertically, li has the align-items: stretch property, which is the default - this allows the heights of li be equal in the row.

See the demo below:

 ul { font-size: 0; max-width: 300px; text-align: center; display:flex; flex-wrap:wrap; justify-content:center; } li { vertical-align: top; display: inline-block; width: 30%; margin: 1%; background: grey; font-size: 12px; } 
 <ul> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> <li>Lorem ipsum dolor sit amet.</li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> </ul>
+7
source

Easy using display: flex . Specify the orientation + wrapping in flex-flow: row wrap; and center alignment in justify-content: center;

Example:

 ul { display: flex; flex-flow: row wrap; justify-content: center; font-size: 0; max-width: 300px; text-align: center; } li { vertical-align: top; display: inline-block; width: 30%; margin: 1%; background: grey; font-size: 12px; } 
 <ul> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> <li>Lorem ipsum dolor sit amet.</li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> </ul>
+4
source

Source: https://habr.com/ru/post/1261834/

More articles:


All Articles