<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 8 年前。
html - 将固定的 css 问题转换为流动的 css 问题
我正在创建一个响应式网站。我正在获取像素宽度并使用 target ÷ context = result 将它们转换为流体。固定后所有内容都完全适合 1140 包装，但当我将所有内容转换为流体时，它不会填满整个 1140 像素宽度的包装。我不知道我做错了什么。
你可以看到这里的一切是如何排列的，以及它的 3 列的总宽度是如何在流体上更窄的:
它们不应该都是完全相同的宽度吗？ 谢谢!
最佳答案
那是因为您错误地计算了 margin 和 width 列的百分比。
由于您使用 box-sizing: border-box;在 section#hp-cols 上，两边填充 10px 的部分的内部宽度为 1120px， 不是 1140px。如果您为您的列使用 width: 31.57894%;(360px 除以 1140px)，它会为您提供带有 353px 宽 而不是 360px(因为31.57894% 1120px 是 353px)。
解决方法是重新计算所有百分比值，并使用 1120 作为分隔符。应该是这样的。
section#hp-cols {
padding: 0 .89285714%; /* 10px / 1120px */
}
section#hp-cols ul li {
width: 32.1428571%; /* 360px / 1120px */
}
section#hp-cols ul li:nth-child(2) {
margin: 0 1.78571429%; /* 20px / 1120px */
}
这是 fiddle和 full demo流体宽度页面。我也做了fiddle和 demo用于比较的固定宽度页面。
希望对您有所帮助:)
关于html - 将固定的 css 问题转换为流动的 css 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24554759/