javascript - Is there a way to position n number of divs inside a div container -
is there way position n number of divs inside div container, each div cell won't collide each other using css , js. need set left value without changing height , top values. fine change cell width.
please check code sample.
.container { width : 400px; height : 1000px; background : #000; position : relative; } .cell { position :absolute; background : yellow; border: 2px solid red; }
<div class="container"> <div class="cell" style="top:50px;width:100%;height:100px"></div> <div class="cell" style="top:150px;width:50%;height:50px"></div> <div class="cell" style="top:150px;width:50%;height:50px;"></div> <div class="cell" style="top:230px;width:33.33%;height:50px;"></div> <div class="cell" style="top:230px;width:33.33%;height:50px;"></div> <div class="cell" style="top:230px;width:33.33%;height:50px;"></div> </div>
expected output:
if cells should stacked 1 above other in order of mention, make display property 'block'
.container { width: 400px; height: 1000px; background: #000; position: relative; } .cell { display: block; background: yellow; border: 2px solid red; }
<div class="container"> <div class="cell" style="width:100%;height:100px;"></div> <div class="cell" style="width:50%;height:50px;"></div> <div class="cell" style="width:50%;height:50px;"></div> <div class="cell" style="width:33.33%;height:50px;"></div> <div class="cell" style="width:33.33%;height:50px;"></div> <div class="cell" style="width:33.33%;height:50px;"></div> </div>
Comments
Post a Comment