添加列作为背景

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