javascript - Count the number of child div inside parent div and align the child divs in the middle of the parent div -
i have 8 child divs inside parent div. have count width of parent div , divide width number of child width , place them in middle of parent div using javascript
you can width of parent , split 8. can set width of children using .css('width')
. in example set height same width, can see there 8 divs. if want height max, set css 100%.
html
<div class="outer"> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> </div>
js
var countdiv = $('.inner').length, outerwidth = $('.outer').css('width').replace('px', ''), singlewidth = outerwidth / countdiv + 'px'; $('.inner').css('width', singlewidth) .css('height', singlewidth);
css
.outer { background-color: red; width: 200px; height: 200px; display: table-cell; vertical-align: middle; } .inner { box-sizing: border-box; border: 1px solid black; background-color: yellow; float: left; }
jsfiddle here
Comments
Post a Comment