动态变化的div

Question

我正在写一个时间表上下的应用程序，在那里我有作为的人行和列的间隔（30分钟）的背景图案。

我需要一个背景图案：背景必须每30分钟的水平虚线和直线每隔一小时。整个表格的

身高是不固定的，它是依赖于屏幕分辨率的高度，因此，使用背景图片将是不可能的，至少我是这么认为的。

我需要定位在柱顶部的div，因为他们的身高和现在的位置是不固定的。我需要7X48表格，但问题是我实际上并不需要表格，因为我不能使用它的行，因为我的单元格没有固定的高度，甚至可能覆盖。

有什么办法，我可以fullfil我的目标只有7格作为列，但还是有不使用表我的背景图案？

如果我能做到这一点，我想我会不遗余力DOM，因为我创造了超过336个节点，当我只需要7

编辑：

jsfiddle.net/Qufzm - 这是我的背景图案的简化版本。我想要使​​用float只有列div来实现同样的效果：左和可能的避免表

Answer 1

Masonry（jQuery插件）可能会有用。

可以说我有下面的HTML：

<div id="container"> 
    <div class="item">...</div> 
    <div class="item">...</div> 
    <div class="item">...</div> 
    <div class="item">...</div> 
    <div class="item">...</div> 
    <div class="item">...</div> 
    <div class="item">...</div> 
    <div class="item">...</div> 
    <div class="item">...</div> 
    <div class="item">...</div> 
    <div class="item">...</div> 
    <div class="item">...</div> 
</div>​ 

JavaScript可以控制列的宽度和高度，有很多其他的选择。

JS代码：

$(function() { 
    $('#container').masonry({ 
     // options 
     itemSelector: '.item', 
     columnWidth: 100, 
     isAnimated: true 
    }); 
});​ 

样品fiddle。查看砌筑工地上的demos。