5

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

该页面有七个部分——这个小提琴显示了所需的源顺序与布局的比较。数字是它在源顺序中的位置，文本是它应该出现在页面上的位置。

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

chrome中的jsfiddle屏幕帽

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

笔记：

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

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

  • 不幸的是，绝对定位不是一个选项，因为布局必须适应任何视口宽度 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 中的样子：

IE10中的jsfiddle屏幕帽

它在 Firefox 中：

Firefox 中的 jsfiddle 屏幕帽

4

3 回答 3

1

如果绝对定位不是一个选项，您需要在页面生成之前计算元素的高度，并根据高度将每个块放入正确的列中。相信我，绝对定位要容易得多！

你可能会想要像Masonry这样的东西。它会根据您的需要为您设置列。它确实依赖于绝对定位，但这只是您唯一简单的选择。您需要稍微修改一下代码以使其具有响应性，我是在一个开发中的网站上完成的，但我不完全记得我做了什么，抱歉。不过，请随意查看源代码。

砌体很快；下面是基本设置，这里有更多细节。

HTML

<div id="container">
  <div class="item">...</div>
  <div class="item w2">...</div>
  <div class="item">...</div>
  ...
</div>

JavaScript

var container = document.querySelector('#container');
var msnry = new Masonry( container, {
  // options
  columnWidth: 200,
  itemSelector: '.item'
});
于 2013-07-05T20:38:45.600 回答
1

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

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

于 2013-07-05T20:16:12.213 回答
0

我设法仅使用 CSS 进行了以下布局：http: //jsfiddle.net/hpr2b/7/

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

.top-left {
    float: right;
    width: 25%;
    margin: 10px 75% 40px -100%;
}

.top-right {
    float: right;
    width: 20%;
    margin: 10px 0 40px 0;
}

.mid-center {
    margin: 10px 20% 10px 25%;
    clear: left;
}

.mid-left {
    float: left;
    clear: right;
    width: 25%;
    margin-top: -20px;
}

.mid-right {
    float: right;
    clear: right;
    width: 20%;
    margin-top: -20px;
}

.bottom-center {
    margin: 0 20% 10px 25%;
}
于 2013-07-05T21:22:52.600 回答