All geek questions in one place

Floating HTML List Elements with Different Heights

I want to put the list items in a grid-like structure, depending on the available width.

Unfortunately, my items have different heights, and sometimes the items do not wrap completely to the left. In the example, I made the first element a little higher to show the problem, in fact I have no idea which element will have that height.

How can I make the beginning of the second line a little further, but always on the left side?

<html> <head> <style> li {display: block; width:200px; height:100px; float:left; border:1px solid;} </style> </head> <body> <ul> <li style="height:110px;"></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>
+6
source share
2 answers

Use display: inline-block instead of float: left/right

jsFiddle Demo

Additional Information: What is the deal with the display: Inline-Block?

+13
source

To make the built-in use of " display:inline:block property", this should solve both problems: 1) is approaching 2) It also gives the distance between the elements

But if you think that all objects can have different heights, I would recommend using " vertical-align:top " and with it " margin-bottom:5px " to give a space, since vertical-align:top removes the space between the lines .

here is the code: -

HTML:

  <ul> <li style="height:110px;"></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>

CSS

 li { display: inline-block; width:200px; height:100px; border:1px solid; vertical-align:top; margin-bottom:5px; }

You can refer to Fiddle here: - http://jsfiddle.net/aasthatuteja/2Uygc/

Please let me know if this solves your problem.

Enjoy it!

+2
source

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

More articles:


All Articles