How to distribute elements evenly inside a div?
Question
I have to place few elements evenly and fluidly inside another div as mocked below:
I've seen the trick using text-align:justify as given in ( https://stackoverflow.com/a/6880421/2159250 ), But given one or two elements, its getting placed(justified) at right/left side as given below: (which is not what I'm looking for).
Any help would be greatly appreciated.
5 answers
solution1
1 ACCPTED 2014-10-04 14:55:15
Left aligned content looks like this (one or more dots represent a whitespace):
+----------------------------------------------+
|word.word.word.word |
+----------------------------------------------+
(1) text-align: justify does not justify the last (or the only) line*. One simple solution is to add a very long word which can only fit on a line of its own:
+----------------------------------------------+
|word..........word..........word..........word|
|longword_longword_longword_longword_longword_l|
+----------------------------------------------+
(2) You want whitespace before the first and after the last word. One simple solution is to add dummy words in order to produce 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 example:
.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 could be used in the future
solution2
1 2014-10-04 18:30:32
This should be what you are looking for. It requires you to wrap your row 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>
solution3
0 2014-10-04 10:57:16
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;
}
solution4
0 2014-10-04 11:11:15
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>
solution5
0 2014-10-04 11:57:30
you are taking this text-align:justify; wrong. actually there is a difference between justify and display: inline; . if you look at the code of the person who's answer was accepted then you will find that he has used both the thing ie text-align: justify and display: inline as the properties of different element and for different purpose.
the place where he has used the text-align:justify; property of container which tell the container to have a proper spacing between its contents and he has used display:inline; as the property of all box es to order them to arrange in a line
if you will only use display:inline then it will only display them in a line without caring about proper spacing but if you define text-align:justify; then itt will going to care about proper spacing or i should say equal padding from the border of the container
look the difference between the code of this guy... actually he has added a lot of css to make it more attractive but i have deleted all the stuff just to explain 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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.