How to add space between elements so they fill their container div?
For Infos and older browser, text-align:justify
+ a pseudo element to generate an extra line can still be usefull. For really old browser (IE5) , turn the pseudo into a tag (span), technic is quiet old but still efficient where flex
is not avalaible or unwanted.
edit : there is nothing here about text-justify
if you ever read too fast ;)
div {
background:#C3DEB7;
padding:1px;
}
p {
background:#A0C5E8;
margin:1em auto;
width:80%;
text-align:justify;
}
p:after {
content:'';
width:100%;
}
span, p:after {
display:inline-block;
}
span {
border-radius: 15px;
background:#7A9FC1;
line-height:60px;
width:60px;
margin-top:1em;
text-align:center;
color:white;
box-shadow:inset 0 0 0 1px ;
}
span:nth-child(1) {
background:#709AC2;
}
span:nth-child(3) {
background:#6D93B7;
}
span:last-child {
background:#948798;
}
<div>
<p>
<span> span</span>
<span> span</span>
<span> span</span>
<span> span</span>
</p>
</div>
http://codepen.io/anon/pen/NNbXEm
You can do this with Flexbox
and justify-content: space-between
.
.content {
display: flex;
justify-content: space-between;
max-width: 400px;
margin: 0 auto;
background: #A0C5E8;
padding: 10px 0;
}
span {
width: 50px;
height: 50px;
background: black;
}
<div class="content">
<span></span>
<span></span>
<span></span>
<span></span>
</div>