css - 3 列布局 -- 无列

Question

当源顺序从一列跳到另一列时，如何在 CSS 中编写三列布局？

该页面有七个部分 -- this fiddle显示所需的源顺序与布局的比较。 number 表示它在源顺序中的位置，text 表示它应该出现在页面上的位置。

http://jsfiddle.net/hpr2b/4/

如您所见，基本上有三列和三行，但第二行中的元素不应顶部对齐，第二行不应清除第一行。每个部分应与其上方部分的底部齐平。

注意事项:

• 源顺序与元素在移动设备上需要出现的顺序一致，遗憾的是无法更改

• 我也没有在标记中复制部分然后根据视口(viewport)宽度显示/隐藏它们的选项

• 不幸的是，绝对定位不是一种选择，因为布局必须适应 320 像素及以上的任何视口(viewport)宽度

我已经尝试了很多著名的 CSS 布局技术，上面的 fiddle 显示了最成功的尝试——这里是用于“顶行”的代码:

.top-center {
    float: left;
    width: 55%;
    margin-left: 25%;
}

.top-left {
    float: left;
    width: 25%;
    margin-left: -80%;
}

.top-right {
    float: right;
    width: 20%;
}

以下是我遇到的问题:

1. IE 9/10 完全是一团糟(见下文)

2. 在 Chrome 中，“右中”div 总是清除“左上”div，防止它位于“右上”下方。此外，如果“右上”div 变得太高，它会与“右中”重叠。

3. 在 Firefox 中，第二个“行”顶部对齐，与第一行的左右部分重叠。

这是它在 IE10 中的样子:

这是在 Firefox 中:

Answer 1

如果定位那么重要并且您无法控制 HTML 代码的(顺序)(我从阅读您的问题中假设是这样)，我宁愿使用 CSS 进行一些可用的绝对定位，并对其进行优化(onDomReady ) 使用 javascript(这让您可以更自由地为您需要的布局选择最佳算法，但对于那些少数反 javascript 的人来说仍然是可用但不完美的布局)。

但是，如果没有看到实际的标记和要求，就很难分辨。