javascript - CSS/JavaScript : multiple columns

Question

我正在寻找一个分栏器插件(制作我的小 div 的分栏)。

重要的是它具有以下特点:

1) 它必须尽可能轻(如果它只是 css 会很棒，但我想它很难在 IE 上运行......)

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

3) div 不能被破坏。换句话说，节点必须移动到下一个 block ，但不能一分为二。节点是 div 元素，它们可能包括其他 div、图像和文本。

4) 列必须有固定宽度和固定边距。这意味着当我调整浏览器大小时，并创建新列(窗口变宽)，新列必须严格保持相同的宽度和它们之间的距离。 (边距:20px)(宽度:200px)

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

如果有一些 css 会很棒.. 但恐怕我需要一些 jQuery 插件，因为我需要支持所有 4 个功能。

我找到了几个插件和css styleshits 有很好的解决方案，但我找不到一个完整的。

谢谢

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这应该可以修复它们。