有没有办法在div容器

Question

有没有办法在div容器中放置n个div，这样每个div单元都不会使用css和js相互冲突。 我们需要设置左值而不更改高度和顶部值。可以改变单元宽度。

请检查此代码示例。

＆＃13;

＆＃13;

.container
	{
	  width : 400px;
	  height : 1000px;
	  background : #000;
	  position : relative;
	}

	.cell
	{
	  position  :absolute;
	  background : yellow;
	  border: 2px solid red;
	}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

预期输出：

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;，那么每行将占用可用空间的第6个。

Answer 3

使用`

  

Z索引

`CSS的属性。