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

Question

有没有办法在一个 div 容器中放置 n 个 div，这样每个 div 单元格就不会使用 css 和 js 相互碰撞。 我们需要在不改变 height 和 top 值的情况下设置 left 值。改变单元格宽度就可以了。

请检查此代码示例。

.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

如果所有的单元格都应该按照它们提到的顺序一个接一个地堆叠，那么只需将它们的显示属性设置为“ 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>