0

我正在编写一个日程安排应用程序，其中我将列作为人员，将行作为间隔（30 分钟）。

我需要一个背景图案：背景必须每 30 分钟有一条水平虚线，每 1 小时有一条直线。

整张桌子的高度不是固定的，它取决于屏幕分辨率的高度，所以使用背景图像是不可能的，至少我是这么认为的。

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

有什么方法可以让我只用 7 个 div 作为列来实现我的目标，但在不使用表格的情况下仍然有我的背景图案？

如果我能做到这一点，我想我会放弃 DOM，因为我创建了超过 336 个节点，而我只需要 7 个。

编辑：

jsfiddle.net/Qufzm - 这是我的背景图案的简化版本。我想使用 float:left 仅使用列 div 来实现相同的效果，并且可能避免使用表

4

1 回答 1

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

样品小提琴。查看砌体现场的演示。

于 2012-10-21T15:45:01.810 回答