添加列作爲背景

Question

這是我的應用程序： http://www.aproov.com/product/meeting-demo/index.html

拿着小部件的容器是一個div和每個插件實際上是由一個元素中鋰元素。

我想要的是從容器頂部延伸到底部並用顏色填充的容器內的4個背景列。目前，您可以通過點擊標題文本拖動小部件。

我不確定添加列的最佳解決方案。每列的寬度是小部件的寬度。起初，我想也許我可以在容器中添加一個div表，並以某種方式使元素在其上浮動。雖然這看起來很複雜。另一個解決方案是使用HTML5畫布，並畫出列。

有什麼建議嗎？

Answer 1

我只是創建您的背景列爲div s 100％的高度和25％的寬度，並把它們放在一個父母div是100％的高度和寬度，並絕對定位在0,0在主要的容器div 。例如：

<div id="container"> <!-- main container --> 
    <div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
    </div> 
</div> 

#container > div { 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    left: 0; 
    top: 0; 
} 

#container > div > div { 
    height: 100%; 
    width: 25%; 
    float: left; 
}