3列布局 - 无列

Question

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

该页面有七个部分 - 这个小提示显示了所需的源顺序与布局的比较.该数字用于其在源订单中的位置,文本是它应在页面上显示的位置.

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

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

笔记:

• 源订单与元素在移动设备上显示的顺序相匹配,遗憾的是无法更改

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

• 遗憾的是,绝对定位不是一种选择,因为布局必须适应320px及以上的任何视口宽度

我已经尝试了许多着名的CSS布局技术,上面的小提示显示了最成功的尝试 - 这里是用于"顶行"的代码:

.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 进行某种程度可用的绝对定位，并使用 javascript 对其进行优化（onDomReady） （这给了你更多的自由来选择你需要的布局的最佳算法，但对于那些少数反javascript的人来说仍然是一个可用但不完美的布局）。

然而，在没有看到实际的标记和要求的情况下很难判断。