CSS/Javascript:多列

Question

我正在寻找一个列化器插件(制作我的小div的列).

它具有以下特点非常重要:

1)它必须尽可能轻(如果只有css会很棒,但我想很难让它在IE上工作......)

2)它必须是跨浏览器(我不需要IE6 ...... IE7和IE8兼容性是必需的).

3)div不得破坏.换句话说,节点必须移动到下一个块但不在2中拆分.节点是div元素,它们可能包括其他div,图像和文本.

4)色谱柱必须有固定的宽度和固定的余量.这意味着当我调整浏览器大小并创建新列(使窗口变得更宽)时,新列必须严格保持它们之间的相同宽度和距离.(保证金:20px)(宽度:200px)

5)内容是动态的.我正在使用drupal作为CMS.我的客户可以添加或删除节点,因此我需要一个动态解决方案.

有一些css会很棒..但我担心我需要一些jQuery插件,因为我需要支持所有4个功能.

我找到了几个插件和css样式的非常好的解决方案,但我找不到一个完整的.

谢谢

Answer 1

我想你想要使用CSS inline-block.根据我的理解,这将满足您的要求.每个列将在页面上一个接一个地出现,并在适当的位置换行到下一行.

CSS

.col {
    display: inline-block;
    /* could add `display:-moz-inline-box` for Firefox 2 compatibility */
    vertical-align: top;
    width: 200px;
    margin-right: 20px;
}

HTML

<div class="container">
    <!-- using span instead of div for IE6 compatibility -->
    <span class="col">1st block</span>
    <span class="col">2nd block</span>
    <span class="col">3rd block</span>
    <span class="col">4th block</span>
</div>

如果IE6-7中存在重大问题,您可以尝试ie7.js来解决它们.