HTML 流体列 : 25% + 25% +25% +25% ! = webkit/opera 中的 100%-6ren

HTML 流体列 : 25% + 25% +25% +25% ! = webkit/opera 中的 100%

转载作者：太空宇宙更新时间：2023-11-04 14:05:53

我正在尝试构建一个自适应的多列布局(流动的、 flex 的，无论您想要什么)，并构建了一个测试文档来尝试这个想法。

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

一切似乎都很顺利，我构建了 CSS 和 HTML(见下文)并在 Firefox 中进行了试用，一切正常。然而，当我在 Opera、Chrome 和 Safari 中尝试时，我遇到了问题。当彼此相邻放置时，这些列的总和似乎没有达到 100%，它们似乎略有不足。列越多，问题就越严重。到 10 列时，问题非常明显。

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

我已经构建了以下代码的 JSFiddle，可用 here .完整的测试页面也可用 here . (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>

最佳答案

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

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

4 adjacent objects of width/height 25% (for example) starting at one edge of a container should end exactly at the other edge; there should never be an extra pixel in the container and they should never be wrapped due to being a pixel to wide

objects that are logically adjacent should always touch visually; there should never be a pixel gap or a pixel of overlap due to rounding error

objects given the same width should occupy the same number of pixels

object boundaries should always (visually) be aliased to a specific pixel boundary in the display (they should never be blurred)

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

编辑:另外，正如您询问如何最好地避免该问题一样 - 尽可能将容器元素的宽度保持在其列之间均匀分割的宽度。 (虽然这对于流体布局并不总是可行的)。

关于HTML 流体列 : 25% + 25% +25% +25% ! = webkit/opera 中的 100%，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11377327/

文章推荐： php - 无法使此 AJAX 请求生效

文章推荐： java - 如何使用ServletMultipartRequest获取请求参数

文章推荐： java - Hibernate 在单个查询中选择集合作为列

文章推荐： html - 图片 (.png) 未在 Chrome、firefox 和 mobile-safari 中显示

mysql - SUM(COUNT(列)*AVG(列)) AS 列
我正在 csv 上使用 hadoop 来分析一些数据。我使用sql/mysql(不确定)来分析数据，现在陷入了僵局。我花了好几个小时在谷歌上搜索，却没有找到任何相关的东西。我需要一个查询，在该查询中
html - BOOTSTRAP 网格 | 4 列 > 2 列 > 1 列
我正在为 Bootstrap 网格布局的“简单”任务而苦苦挣扎。我希望在大视口(viewport)上有 4 列，然后在中型设备上有 2 列，最后在较小的设备上只有 1 列。当我测试我的代码片段时，似
mysql - 仅选择具有重复(A 列 || B 列)但不同(C 列)值的记录
对于这个令人困惑的标题，我深表歉意，我想不出这个问题的正确措辞。相反，我只会给你背景信息和目标: 这是在一个表中，一个人可能有也可能没有多行数据，这些行可能包含相同的 activity_id 值，也可
sequelize.js - 如何使用 Sequelize 结果查找 A 列 > B 列 + C 列
具有 3 列的数据库表 - A int , B int , C int 我的问题是: 如何使用 Sequelize 结果找到 A > B + C const countTasks = await Ta
MySQL 选择 DISTINCT 列 1、列 2From 表 order by 列 2 DESC
我在通过以下功能编写此查询时遇到问题: 首先按第 2 列 DESC 排序，然后从“不同的第 1 列”中选择只有 Column1 是 DISTINCT 此查询没有帮助，因为它首先从第 1 列中进行选择
css - 使用 bootstrap，台式机中有 4 列，平板电脑中有 2 列，移动设备中有 1 列
使用 Bootstrap 非常有趣和有帮助，目前我在创建以下需求时遇到问题。 “使用 bootstrap 在桌面上有 4 列，在平板电脑上有 2 列，在移动设备上有 1 列”谁能告诉我正确的结构最佳
r - 比较第 1 列(第 1 列)中的连续值并使用第 1 列后比较结果创建新列(第 2 列)
我是 R 新手，正在问一个非常基本的问题。当然，我在尝试从所提供的示例中获取指导的同时做了功课here和 here ，但无法在我的案例中实现这个想法，即可能是由于我的问题中的比较维度更大。我的实
python - 如果文件 1 中的 A 列 = 文件 2 中的 A 列，则替换为文件 2 中的 B 列
通常我会使用 R 并执行 merge.by，但这个文件似乎太大了，部门中的任何一台计算机都无法处理它! (任何从事遗传学工作的人的附加信息)本质上，插补似乎删除了 snp ID 的 rs 数字，我只剩
python - 当第 1 列 > 0 且第 2 列 <= 0 时，如何将第 1 列的值分配给第 2 列
我有一个 df , delta1 delta2 0 -1 2 0 -1 0 0 0 我想知道如何分配 delt
MySQL 加入 ON 列 a IN(列 b)
您好，我想知道是否可以执行以下操作。显然，我已经尝试在 phpMyAdmin 中运行它，但出现错误。也许还有另一种方式来编写此查询。 SELECT * FROM eat_eat_restaurants
python - 如何将 listA 列 1 值匹配并替换为与 ListB 列 1 匹配的 ListB 列 2 值，就像我们在 vlookup 中所做的那样
我有 2 个列表(标题和数据值)。我想要将数据值列 1 匹配并替换为头文件列 1，以获得与 dataValue 列 1 和标题值列 2 匹配的值头文件 TotalLoad,M0001001 Hois
linux - 如果 file1 的 B 列 = file2 的 B 列，则将 file1 的 A 列替换为 file2 的 A 列
我有两个不同长度的文件，file2 是一个很大的引用文件，我从中提取文件 1 的数据。我有一行 awk，我通常会对其进行调整以在我的文件中进行查找和替换，但它总是在同一列中进行查找和替换。所以对于
sql - 检查一个表(列)中的日期是否适合另一个表(列)中的另一个日期
假设我有两个表，如下所示。 create table contract( c_ID number(1) primary key, c_name varchar2(50) not
java - 无法将减号插入具有检查约束的 varchar 列(列 <> '')
我有一个带有 varchar 列的 H2 表，其检查约束定义如下: CONSTRAINT my_constraint CHECK (varchar_field <> '') 以下插入语句失败，但当我删
CSS 3 列，为什么第三列接管了其他 2 列？
这是最少量的代码，可以清楚地说明我的问题: One Two Three 前 2 个 div 应该是 2 个左列。第三个应该占据页面的其余部分。最后，我将添加选项来隐藏和
azure - 该查询未返回 TimeGenerate 列。请编辑查询并包含 TimeGenerate 列
在 Azure 中的 Log Analytics 中，我为 VM Heartbeat 选择一个预定义查询，我在编辑器中运行查询正常，但当我去创建警报时，我不断收到警报“查询未返回 TimeGenera
azure - 该查询未返回 TimeGenerate 列。请编辑查询并包含 TimeGenerate 列
在 Azure 中的 Log Analytics 中，我为 VM Heartbeat 选择一个预定义查询，我在编辑器中运行查询正常，但当我去创建警报时，我不断收到警报“查询未返回 TimeGenera
java - 为什么 [列,行] 而不是 [行,列]
今天我开始使用 JexcelApi 并遇到了这个:当您尝试从特定位置获取元素时，不是像您通常期望的那样使用sheet.getCell(row,col)，而是使用sheet.getCell(col,ro
C# 显示数据库的 2 列，共有 28 列
我有一个包含 28 列的数据库。第一列是代码，第二列是名称，其余是值。 public void displayData() { con.Open(); MySqlDataAdapter
html - 我的网页是 2 列，但在放大时重叠成 1 列？
我很沮丧:每当我缩小这个网页时，一切都变得一团糟。我如何将网页居中，以便我可以缩小并且元素不会被错误定位。 (它应该是 2 列，但所有内容都合并为 1)我试过但由于某种原因，这不起作用。 www.o

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

HTML 流体列 : 25% + 25% +25% +25% ! = webkit/opera 中的 100%