All geek questions in one place

How to distribute elements evenly inside a div?

I need to place several elements evenly and fluidly inside another div, as taunts below:

enter image description here

enter image description here

enter image description here

I saw the trick using text-align: justify, as indicated in ( https://stackoverflow.com/a/166269/ ), but taking into account one or two elements its placement (justified) to the right / left, as shown below: (this not what I'm looking for).

enter image description here

Any help would be greatly appreciated.

+5
source share
5 answers

On the left, the aligned content is as follows (one or more points are spaces):

+----------------------------------------------+ |word.word.word.word | +----------------------------------------------+

(1) text-align: justify does not justify the last (or only) line *. One simple solution is to add a very long word that can only fit on a separate line:

 +----------------------------------------------+ |word..........word..........word..........word| |longword_longword_longword_longword_longword_l| +----------------------------------------------+

(2) You want spaces before the first and after the last word. One simple solution is to add dummy words to get the following result:

 +----------------------------------------------+ |dummy....word....word....word....word....dummy| |longword_longword_longword_longword_longword_l| +----------------------------------------------+

The desired result can be achieved by adding additional markup. For instance:

 .row { text-align: justify; } .row:after { display: inline-block; content: ""; width: 100%; } .box { display: inline-block; } .dummy { display: inline-block; } /**** FOR TESTING ****/ .row { margin: 1em 0; background: #FC0; } .box { background: #F0C; width: 4em; height: 5em; } .box:nth-child(even) { background: #0CF; width: 8em; } 
 <div class="row"> <div class="dummy"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="dummy"></div> </div> <div class="row"> <div class="dummy"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="dummy"></div> </div> <div class="row"> <div class="dummy"></div> <div class="box"></div> <div class="box"></div> <div class="dummy"></div> </div> <div class="row"> <div class="dummy"></div> <div class="box"></div> <div class="dummy"></div> </div>

* text-align-last property may be used in the future

+1
source

This should be what you are looking for. This requires you to wrap the string elements inside a dummy div, but that should be fine.

 .row { display: table; width: 100%; table-layout: fixed; margin-bottom: 10px; } .element-wrapper { display: table-cell; vertical-align: top; } .element { width: 80%; height: 100px; margin: auto; background: #ccc; } 
 <div class="row"> <div class="element-wrapper"> <div class="element">Toto</div> </div> <div class="element-wrapper"> <div class="element">Titi</div> </div> <div class="element-wrapper"> <div class="element">Tata</div> </div> <div class="element-wrapper"> <div class="element">Tete</div> </div> </div> <div class="row"> <div class="element-wrapper"> <div class="element">Toto</div> </div> <div class="element-wrapper"> <div class="element">Titi</div> </div> <div class="element-wrapper"> <div class="element">Tata</div> </div> </div> <div class="row"> <div class="element-wrapper"> <div class="element">Toto</div> </div> <div class="element-wrapper"> <div class="element">Titi</div> </div> </div>
+1
source

Demo

 ul { margin: 0 auto; width:100%; list-style: none; position:relative; text-align: center; vertical-align: middle; } ul li { width: 218px; height: 218px; display: inline-block; background:#ccc; margin: 40px; border: 1px solid #d9d9d9; box-shadow: 1px 1px 1px #f2f2f2; position: relative; padding:0px; overflow:hidden; }
0
source

Try this code

 <html> <head> <title>my page</title> <style type="text/css"> .new{width: 500px; height: 200px; border: 1px solid #333; text-align: center; display: table-cell; vertical-align: middle;} .new div{width: 100px; height: 100px; border: 1px solid #300; display: inline-block;} </style> </head> <body> <div class="new"> <div></div> <div></div> <div></div> <div></div> </div> </body> </html>
0
source

you accept this text-align:justify; wrong. there is actually a difference between justify and display: inline; . if you look at the code of the person whose answer was accepted, you will find that he used both the thing ie text-align: justify and display: inline as properties of another element and for different purposes.

the place where he used the text-align:justify; property text-align:justify; a container that tells the container the correct location between its contents, and he used display:inline; as a property of all fields to arrange them in a row

if you use only display:inline , then it will only display them in a row, not caring about the correct distance, but if you define text-align:justify; then itt will take care of the right distance or should I say that equal padding from the container border

Look at the difference between this guy’s code ... in fact, he added a lot of css to make it more attractive, but I deleted everything just to explain to you:

code without text-align:justify; :

 #container { border: 2px dashed #444; height: 125px; /* just for demo */ min-width: 612px; } .box1, .box2, .box3, .box4 { width: 150px; height: 125px; vertical-align: top; display: inline-block; }

code with text-align:justify;

 #container { border: 2px dashed #444; height: 125px; text-align: justify; /* just for demo */ min-width: 612px; } .box1, .box2, .box3, .box4 { width: 150px; height: 125px; vertical-align: top; display: inline-block; }
0
source

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

More articles:


All Articles