有沒有一種方法來定位的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>

預期輸出：

來源

2017-04-07 Arun D Nambissan

你期待什麼輸出？ –

「位置：絕對」必要嗎？ – 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>

來源

2017-04-07 10:24:20 gurvinder372

謝謝。但是細胞的最高價值不應該改變。 –

@ArunDNambissan您是從一組值中生成這些單元格，在這種情況下，可以動態計算並分配相對最高值。 – gurvinder372

是的。 div是使用js代碼生成的。我可以設置單元格的最高值。我需要的是設置左側的值。 –

-1

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;，則每行將佔用可用空間的六分之一。

來源

2017-04-07 10:27:33

-1

使用`

Z-指數

`CSS的財產。

來源

2017-04-07 10:32:41

有沒有一種方法來定位的div容器

回答

相關問題