html - Keep space / padding between Divs -


how able keep space between inlined div elements without counting space 'pixels'?

for example, i'm using margin-right (as padding between elements) counting pixels (the result shows off ugly, see jsfiddle, div element gets pushed down).

#parent .child {     position: relative;     display: inline-block;     height: 100%;     width: 16.5%;     background-color: green;     margin-right: 15px; } 

jsfiddle

basically, have first item floaten left , last item floaten right. know many of guys thinking, why not use feature 'justify'? i've tried using it, isn't option since amount of elements can (10, 5, 8, etc).

help appericiated!

edit: feature i'd achieve multiple elements (instead of having 1 row, there 2-16 rows. enter image description here

you can use text-align: justify. won't justify last line, can force new line pseudo-element:

#parent {    text-align: justify;    background-color: red;  }  #parent:after {    content: '';    display: inline-block;    width: 100%;  }  #parent .child {    display: inline-block;    height: 100px;    width: 16.5%;    background-color: green;    margin-right: 15px;    margin-bottom: 10px;  }
<div id="parent">    <div class="child"></div>    <div class="child"></div>    <div class="child"></div>    <div class="child"></div>    <div class="child"></div>    <div class="child"></div>    <div class="child"></div>    <div class="child"></div>    <div class="child"></div>  </div>


Comments

Popular posts from this blog

python - pip install -U PySide error -

arrays - C++ error: a brace-enclosed initializer is not allowed here before ‘{’ token -

cytoscape.js - How to add nodes to Dagre layout with Cytoscape -