有沒有辦法在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的`屬性。