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

Question

有没有一种方法可以在div容器中放置n个div，这样每个div单元都不会使用css和js相互冲突。 我们需要在不更改高度和顶部值的情况下设置左侧值。 更改单元格宽度是可以的。

请检查此代码示例。

 .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> 

预期产量：

Answer 1

如果所有单元都应按照其提及的顺序堆叠在一起，则只需将其显示属性设置为“块”

 .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;
    }

使用flexbox不管容器的大小如何，每一行都不会冲突，而使用flex:1; 每行将占用尽可能多的空间。 如果要使用flex-direction:row; 而是每行将占用可用空间的六分之一。

Answer 3

使用`

Z指数

CSS的`属性。