2

我正在尝试构建一个自适应的多列布局（流体，弹性，无论你想要什么），并构建了一个测试文档来尝试这个想法。

我做了一些计算，得出的数字可以让 x 列完全并排放置在页面中。2 很容易 (50%)，4 (25%) 和 10 (10%) 也是如此。如果您考虑边距以留下排水沟并减去它，那么您将获得所需的列宽百分比。

一切似乎都很顺利，我构建了 CSS 和 HTML（见下文）并在 Firefox 中进行了尝试，一切正常。但是，当我在 Opera、Chrome 和 Safari 中试用它时，我遇到了问题。当它们并排放置时，这些柱子的总和似乎没有达到 100%，它们似乎略微不足。列越多，问题就越严重。通过 10 列，问题非常明显。

为什么会这样？Firefox 的行为是正确的，还是其他浏览器中正在发生的事情意味着要发生的事情？更重要的是，我如何解决它以在所有浏览器中产生一致的结果？

我已经构建了以下代码的 JSFiddle，可在此处获得。完整的测试页面也可以在这里找到。（JSfiddle 只是相关代码，而整个页面还有其他内容）

列的 CSS 如下：

.columnHolder {
    overflow: hidden;
    background: #EFE; /* For layout testing only! */
    margin: .5em 0;
    padding: 0;
}
.columnHolder h1 {
    background: #EFF; /* For layout testing only! */
}
.column {
    float: left;
    margin: .5%;
    background: #FFE; /* For layout testing only! */
    text-align: justify;
}
.column.half {
    width: 49%;
}
.column.third {
    width: 32.33333%
}
.column.quarter {
    width: 24%;
}
.column.fifth {
    width: 19%;
}
.column.sixth {
    width: 15.66666%;
}
.column.seventh {
    width: 13.28571%;
}
.column.eighth {
    width: 11.5%;
}
.column.ninth {
    width: 10.11111%;
}
.column.tenth {
    width: 9%;
}

我正在测试的（缩减版）标记如下：

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Gordian Solutions</title>
        <link rel="stylesheet" href="./css/core.css" media="all" />
    </head>
    <body>
        <article style="margin: 1em 10% 1em 10%;">
            <section class="columnHolder">
                <h1>2 Column Test</h1>
                <div class="column half">
                    <p> Nulla hendrerit; <a href="#">nunc quis mollis</a> cursus; lectus libero viverra turpis, ut ornare arcu mauris eu ipsum. Curabitur et dolor dui, nec sagittis felis. Nam elit purus, eleifend nec pulvinar et, commodo id nisl. Curabitur pharetra, quam porttitor aliquam volutpat, nunc ipsum semper quam, non imperdiet libero risus non diam. Praesent et dui arcu. Praesent lorem lorem, malesuada sit amet egestas eget, lacinia sed velit. In congue sagittis ipsum, sed venenatis ligula vulputate vel? </p>
                </div>
                <div class="column half">
                    <p> Proin ornare, nisl et vestibulum dignissim, purus odio scelerisque massa, in mollis dolor neque nec massa. Vestibulum neque ipsum, sodales sit amet dapibus a, viverra sit amet est. Mauris odio mi, semper vel ultricies ac, hendrerit eget tortor. Quisque eu mi tellus, nec iaculis lectus. Duis pellentesque, ipsum nec molestie aliquet, lorem urna scelerisque risus, quis venenatis nibh dolor ac elit. Duis vitae nisi ante. <a href="#">Morbi dictum ornare</a> justo in fermentum. </p>
                </div>
            </section>
            <section class="columnHolder">
                <h1>4 Column Test</h1>
                <div class="column quarter">
                    <p> Nulla hendrerit; <a href="#">nunc quis mollis</a> cursus; lectus libero viverra turpis, ut ornare arcu mauris eu ipsum. Curabitur et dolor dui, nec sagittis felis. Nam elit purus, eleifend nec pulvinar et, commodo id nisl. Curabitur pharetra, quam porttitor aliquam volutpat, nunc ipsum semper quam, non imperdiet libero risus non diam. Praesent et dui arcu. Praesent lorem lorem, malesuada sit amet egestas eget, lacinia sed velit. In congue sagittis ipsum, sed venenatis ligula vulputate vel? </p>
                </div>
                <div class="column quarter">
                    <p> Proin ornare, nisl et vestibulum dignissim, purus odio scelerisque massa, in mollis dolor neque nec massa. Vestibulum neque ipsum, sodales sit amet dapibus a, viverra sit amet est. Mauris odio mi, semper vel ultricies ac, hendrerit eget tortor. Quisque eu mi tellus, nec iaculis lectus. Duis pellentesque, ipsum nec molestie aliquet, lorem urna scelerisque risus, quis venenatis nibh dolor ac elit. Duis vitae nisi ante. <a href="#">Morbi dictum ornare</a> justo in fermentum. </p>
                </div>
                <div class="column quarter">
                    <p> Donec magna justo, semper nec pulvinar eu, faucibus eget neque. Nunc egestas porttitor orci, eget congue nisl rutrum in. Donec ut dignissim nunc. Sed a suscipit ante. Fusce in nunc id risus elementum molestie eget eget eros. Nunc eget dolor sit amet eros accumsan porta. Phasellus nibh ligula, ullamcorper sed adipiscing at, luctus ut justo. Mauris eleifend posuere laoreet. Integer odio leo, dapibus a pretium sit amet, ultricies id augue. Aliquam mollis ipsum id urna varius iaculis. Class aptent taciti sociosqu ad <a href="#">litora torquent per conubia</a> nostra, per inceptos himenaeos. Pellentesque leo arcu, rhoncus ut suscipit ut, posuere a sapien. Nullam a nisi nec nibh facilisis egestas dignissim quis magna. Nulla nec egestas elit. Nunc nibh est, porttitor at hendrerit a, iaculis vel est. Cras pulvinar dignissim neque, et ultrices massa tristique nec. </p>
                </div>
                <div class="column quarter">
                    <p> Nulla hendrerit; <a href="#">nunc quis mollis</a> cursus; lectus libero viverra turpis, ut ornare arcu mauris eu ipsum. Curabitur et dolor dui, nec sagittis felis. Nam elit purus, eleifend nec pulvinar et, commodo id nisl. Curabitur pharetra, quam porttitor aliquam volutpat, nunc ipsum semper quam, non imperdiet libero risus non diam. Praesent et dui arcu. Praesent lorem lorem, malesuada sit amet egestas eget, lacinia sed velit. In congue sagittis ipsum, sed venenatis ligula vulputate vel? </p>
                </div>
            </section>
            <section class="columnHolder">
                <h1>10 Column Test</h1>
                <div class="column tenth">
                    <p> Nulla hendrerit; <a href="#">nunc quis mollis</a> cursus; lectus libero viverra turpis, ut ornare arcu mauris eu ipsum. Curabitur et dolor dui, nec sagittis felis. Nam elit purus, eleifend nec pulvinar et, commodo id nisl. Curabitur pharetra, quam porttitor aliquam volutpat, nunc ipsum semper quam, non imperdiet libero risus non diam. Praesent et dui arcu. Praesent lorem lorem, malesuada sit amet egestas eget, lacinia sed velit. In congue sagittis ipsum, sed venenatis ligula vulputate vel? </p>
                </div>
                <div class="column tenth">
                    <p> Proin ornare, nisl et vestibulum dignissim, purus odio scelerisque massa, in mollis dolor neque nec massa. Vestibulum neque ipsum, sodales sit amet dapibus a, viverra sit amet est. Mauris odio mi, semper vel ultricies ac, hendrerit eget tortor. Quisque eu mi tellus, nec iaculis lectus. Duis pellentesque, ipsum nec molestie aliquet, lorem urna scelerisque risus, quis venenatis nibh dolor ac elit. Duis vitae nisi ante. <a href="#">Morbi dictum ornare</a> justo in fermentum. </p>
                </div>
                <div class="column tenth">
                    <p> Donec magna justo, semper nec pulvinar eu, faucibus eget neque. Nunc egestas porttitor orci, eget congue nisl rutrum in. Donec ut dignissim nunc. Sed a suscipit ante. Fusce in nunc id risus elementum molestie eget eget eros. Nunc eget dolor sit amet eros accumsan porta. Phasellus nibh ligula, ullamcorper sed adipiscing at, luctus ut justo. Mauris eleifend posuere laoreet. Integer odio leo, dapibus a pretium sit amet, ultricies id augue. Aliquam mollis ipsum id urna varius iaculis. Class aptent taciti sociosqu ad <a href="#">litora torquent per conubia</a> nostra, per inceptos himenaeos. Pellentesque leo arcu, rhoncus ut suscipit ut, posuere a sapien. Nullam a nisi nec nibh facilisis egestas dignissim quis magna. Nulla nec egestas elit. Nunc nibh est, porttitor at hendrerit a, iaculis vel est. Cras pulvinar dignissim neque, et ultrices massa tristique nec. </p>
                </div>
                <div class="column tenth">
                    <p> Nulla hendrerit; <a href="#">nunc quis mollis</a> cursus; lectus libero viverra turpis, ut ornare arcu mauris eu ipsum. Curabitur et dolor dui, nec sagittis felis. Nam elit purus, eleifend nec pulvinar et, commodo id nisl. Curabitur pharetra, quam porttitor aliquam volutpat, nunc ipsum semper quam, non imperdiet libero risus non diam. Praesent et dui arcu. Praesent lorem lorem, malesuada sit amet egestas eget, lacinia sed velit. In congue sagittis ipsum, sed venenatis ligula vulputate vel? </p>
                </div>
                <div class="column tenth">
                    <p> Proin ornare, nisl et vestibulum dignissim, purus odio scelerisque massa, in mollis dolor neque nec massa. Vestibulum neque ipsum, sodales sit amet dapibus a, viverra sit amet est. Mauris odio mi, semper vel ultricies ac, hendrerit eget tortor. Quisque eu mi tellus, nec iaculis lectus. Duis pellentesque, ipsum nec molestie aliquet, lorem urna scelerisque risus, quis venenatis nibh dolor ac elit. Duis vitae nisi ante. <a href="#">Morbi dictum ornare</a> justo in fermentum. </p>
                </div>
                <div class="column tenth">
                    <p> Donec magna justo, semper nec pulvinar eu, faucibus eget neque. Nunc egestas porttitor orci, eget congue nisl rutrum in. Donec ut dignissim nunc. Sed a suscipit ante. Fusce in nunc id risus elementum molestie eget eget eros. Nunc eget dolor sit amet eros accumsan porta. Phasellus nibh ligula, ullamcorper sed adipiscing at, luctus ut justo. Mauris eleifend posuere laoreet. Integer odio leo, dapibus a pretium sit amet, ultricies id augue. Aliquam mollis ipsum id urna varius iaculis. Class aptent taciti sociosqu ad <a href="#">litora torquent per conubia</a> nostra, per inceptos himenaeos. Pellentesque leo arcu, rhoncus ut suscipit ut, posuere a sapien. Nullam a nisi nec nibh facilisis egestas dignissim quis magna. Nulla nec egestas elit. Nunc nibh est, porttitor at hendrerit a, iaculis vel est. Cras pulvinar dignissim neque, et ultrices massa tristique nec. </p>
                </div>
                <div class="column tenth">
                    <p> Nulla hendrerit; <a href="#">nunc quis mollis</a> cursus; lectus libero viverra turpis, ut ornare arcu mauris eu ipsum. Curabitur et dolor dui, nec sagittis felis. Nam elit purus, eleifend nec pulvinar et, commodo id nisl. Curabitur pharetra, quam porttitor aliquam volutpat, nunc ipsum semper quam, non imperdiet libero risus non diam. Praesent et dui arcu. Praesent lorem lorem, malesuada sit amet egestas eget, lacinia sed velit. In congue sagittis ipsum, sed venenatis ligula vulputate vel? </p>
                </div>
                <div class="column tenth">
                    <p> Proin ornare, nisl et vestibulum dignissim, purus odio scelerisque massa, in mollis dolor neque nec massa. Vestibulum neque ipsum, sodales sit amet dapibus a, viverra sit amet est. Mauris odio mi, semper vel ultricies ac, hendrerit eget tortor. Quisque eu mi tellus, nec iaculis lectus. Duis pellentesque, ipsum nec molestie aliquet, lorem urna scelerisque risus, quis venenatis nibh dolor ac elit. Duis vitae nisi ante. <a href="#">Morbi dictum ornare</a> justo in fermentum. </p>
                </div>
                <div class="column tenth">
                    <p> Donec magna justo, semper nec pulvinar eu, faucibus eget neque. Nunc egestas porttitor orci, eget congue nisl rutrum in. Donec ut dignissim nunc. Sed a suscipit ante. Fusce in nunc id risus elementum molestie eget eget eros. Nunc eget dolor sit amet eros accumsan porta. Phasellus nibh ligula, ullamcorper sed adipiscing at, luctus ut justo. Mauris eleifend posuere laoreet. Integer odio leo, dapibus a pretium sit amet, ultricies id augue. Aliquam mollis ipsum id urna varius iaculis. Class aptent taciti sociosqu ad <a href="#">litora torquent per conubia</a> nostra, per inceptos himenaeos. Pellentesque leo arcu, rhoncus ut suscipit ut, posuere a sapien. Nullam a nisi nec nibh facilisis egestas dignissim quis magna. Nulla nec egestas elit. Nunc nibh est, porttitor at hendrerit a, iaculis vel est. Cras pulvinar dignissim neque, et ultrices massa tristique nec. </p>
                </div>
                <div class="column tenth">
                    <p> Nulla hendrerit; <a href="#">nunc quis mollis</a> cursus; lectus libero viverra turpis, ut ornare arcu mauris eu ipsum. Curabitur et dolor dui, nec sagittis felis. Nam elit purus, eleifend nec pulvinar et, commodo id nisl. Curabitur pharetra, quam porttitor aliquam volutpat, nunc ipsum semper quam, non imperdiet libero risus non diam. Praesent et dui arcu. Praesent lorem lorem, malesuada sit amet egestas eget, lacinia sed velit. In congue sagittis ipsum, sed venenatis ligula vulputate vel? </p>
                </div>
            </section>
        </article>
    </body>
</html>
4

2 回答 2

7

问题与开始使用百分比宽度时的舍入差异有关 - 例如，如果原始容器是205 像素并且您有4 x 25% 列，则您将每列设置为51.25px的宽度。你不能有 1/4 像素，但是处理方式会因浏览器而异——有些可能会在每种情况下丢掉 1/4 像素；其他人可能会将 1px 标记到最后一列。

编辑：阅读John Resig多年前关于此的一篇好文章，值得一读。他引用了 Mozilla 开发人员 David Baron 的话，很好地总结了这些问题：

  1. 4 个宽度/高度为 25%（例如）的相邻对象从容器的一个边缘开始，应恰好在另一边缘结束；容器中不应该有额外的像素，并且它们不应该被包裹，因为它们是一个像素宽
  2. 逻辑上相邻的对象应始终在视觉上接触；由于舍入误差，不应存在像素间隙或重叠像素
  3. 给定相同宽度的对象应占用相同数量的像素
  4. 对象边界应始终（在视觉上）与显示中的特定像素边界混叠（它们不应被模糊）

CSS 规范中没有关于如何实现上述 4 个要求的真正标准化，这就是为什么浏览器以不同的方式在这些方面妥协的原因。

编辑：顺便说一句，正如您所问的那样，如何最好地避免这个问题 - 在可能的情况下，将容器元素保持在其列中可均匀分割的宽度。（虽然这在流体布局中并不总是可行的）。

于 2012-07-07T18:12:18.693 回答
1

通常有帮助的是从一列或两列中省略宽度设置。这允许浏览器自己计算它们的宽度。

例如，我网站的搜索结果概览目前采用 3 列布局，其中只有左右列具有指定的宽度。中间一栏的宽度（article#main）由浏览器计算得出：
http ://www.omegajunior.net/found.html

于 2012-08-14T22:06:42.623 回答