javascript - Variable Number of Divs Equally Spaced Vertically in a Container Div -
i looking this vertically instead of horizontally. have tried solution here want child divs equally space on entire height of container div - solution centers divs without expanding space in between them use entire height of container. willing use javascript, prefer html/css solution. i've looked briefly flexbox, scared off backwards compatibility issues.
some basic code:
<div id="parent"> <div id="1" class="child"></div> <div id="2" class="child"></div> <div id="3" class="child"></div> </div> should render div1 @ extreme top of parent, div 2 @ extreme bottom of parent, , div3 centered in middle, , ideally add variable number of additional child divs , spacing automatically adjust.
any suggestions? should use flexbox , not worry supporting older browsers?
i have worked javascript. javascript code is
function cssfunction(){ var elem = document.getelementsbyclassname("child") var len = elem.length; for(var i=0;i<len;i++){ elem[i].style.height =200/len; } } and css
div#parent{ max-height: 200px; width : 500px; padding : 0px; margin : 0px; } .child{ border:2px solid #a1a1a1; width : 93%; margin : 5% 0%; height : 100%; } and html is
<body onload="cssfunction()"> <div id="parent"> <div id="d1" class="child">vertical alignment</div> <div id="d2" class="child">vertical alignment</div> <div id="d3" class="child">vertical alignment</div> <div id="d4" class="child">vertical alignment</div> <div id="d5" class="child">vertical alignment</div> <div id="d6" class="child">vertical alignment</div> <div id="d7" class="child">vertical alignment</div> <div id="d8" class="child">vertical alignment</div> </div>
Comments
Post a Comment