有没有一种方法来定位的div容器

问题描述：

内的div的数值N是有办法来定位一个div容器内的div N多，因此使用CSS和JS每个格单元不会相互碰撞。我们需要在不改变高度和顶部值的情况下设置左侧值。可以改变单元格宽度。有没有一种方法来定位的div容器

请检查该代码示例。

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

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

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

预期输出：

你期待什么输出？ –

“位置：绝对”必要吗？ – Swellar

提供至少你所期望的输出，使我们也许能够想象它更好 – Swellar

答

如果所有的细胞应一个堆叠在另一个的上面在其提及的顺序，然后简单地使它们的显示属性 '块'

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

谢谢。但是细胞的最高价值不应该改变。 –

@ArunDNambissan您是从一组值中生成这些单元格，在这种情况下，可以动态计算并分配相对最高值。 – gurvinder372

是的。 div是使用js代码生成的。我可以设置单元格的最高值。我需要的是设置左侧的值。 –

答

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的每一行不会colide不管容器的大小，并与flex:1;的每一行都将采取尽可能多的空间，因为它可以。如果您有flex-direction:row;，则每行将占用可用空间的六分之一。

答

使用`

Z-指数

`CSS的财产。

有没有一种方法来定位的div容器

相关推荐