html - 使用不带 CSS3 的 HTML 或 CSS 将任意长度的 div 系列拆分为列

Question

我想垂直拆分一系列 div：

我的 HTML 可能如下所示：

<div>A</div>
<div>B</div>
...
<div>G</div>

我希望他们看起来像这样

A D G
B E
C F

元素的数量是任意的，如果可能的话，我想避免在某些 div 上添加额外的属性，因为这会大大增加复杂性。

我已经查看了 CSS3 列选项，但是没有 CSS3 有没有办法做到这一点？我也希望避免使用 Javascript 库。

Answer 1

假设您希望它是动态的，那么在不依赖CSS3 Columns或 JS（插件或其他）的情况下，没有明智的方法来复制这样的布局。

tbowman 的使用浮点数和指定宽度的建议会导致项目的不同顺序：

A B C
D E F
G

但是，如果您可以使用 jquery重新排列项目根据需要将项目包装到列中（逻辑可以在 vanilla javascript 中复制）。如果您使用 AJAX 检索此内容并在将内容添加到 DOM之前将其包装到列中，则可以加分，这样就不会出现烦人的闪烁。

var $container = $('#container'); //assuming this is the parent
var $content = $container.children();
var itemsPerColumn = (Math.ceil($content.length / 3));
for (var i = 0; i < 3; i++) {
    $content.slice(i * itemsPerColumn, (i + 1) * itemsPerColumn)
    .wrapAll('<div class="column" />');
}

摆弄延迟渲染以进行比较。如果 js 由于某种原因失败，页面仍可用于“正常”布局。

Answer 2

如果没有 CSS3，最好的办法是在所有 div 上指定一个宽度，并且无论何时你想要换行符都包含一个类“.clear”：

.clear { clear:both; display:block; height:0; }

然后，您可以说 Athis 在下一行对于宽度，如果您不想要 CSS3，您可以使用具有预定义宽度的 css 类