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; }
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.
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
Post a Comment