有没有办法在div容器中放置n个div

Question

Is there a way to position n number of divs inside a div container, so that each div cell won't collide each other using css and js. We need to set the left value without changing the height and top values. It is fine to change the cell width.

Please check this 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:

Answer 1

If all the cells should be stacked one above the other in the order of their mention, then simply make their 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> 

Answer 2

https://codepen.io/anon/pen/ryEaQr

<div class="container">
   <div class="cell"></div>  
   <div class="cell"></div>
   <div class="cell"></div>
   <div class="cell"></div>
   <div class="cell"></div>
   <div class="cell"></div>
</div>

.container
    {
      width : 400px;
      height : 1000px;
      background : #000;
      display:flex;
    flex-direction:column;
    }

    .cell
    {
      flex:1;
      background : yellow;
      border: 2px solid red;
    }

Using flexbox each row will not colide no matter the size of the container, and with flex:1; each row will take as much space as it can. If you were to have flex-direction:row; instead each row would take a 6th of the space available.

Answer 3

Use `

Z-index

` property of CSS.