将固定转换为流体css问题

Question

我正在创建一个响应式网站。我正在使用像素宽度并使用目标÷context = result将它们转换为流体。固定后，一切都完美地适合1140包装，但是当我将所有东西都转换为流体时，它不会填满整个1140px宽度的包装。我无法弄清楚我做错了什么。

您可以看到所有内容如何排列在这里以及3列的整体宽度如何在流体上更加狭窄：

HTML page for fixed width

CSS for fixed

HTML page for fluid

CSS for fluid

它们不应该都是完全相同的宽度吗？ 谢谢！

Answer 1

这是因为您错误地计算了列margin和width的百分比。

由于您在section#hp-cols上使用box-sizing: border-box;，因此两侧10px填充的部分的内部宽度为 1120px ，不 1140px 。如果您对列使用width: 31.57894%;（360px除以1140px），则会为您提供 353px宽 的列，而不是 360px （31.57894%的{​​{1}}为1120px）。

解决方案是重新计算所有百分比值，并使用1120作为分隔符。它应该是这样的。

353px

以下是流体宽度页面的fiddle和full demo。我还制作了固定宽度页面的fiddle和demo进行比较。

希望有所帮助：）

Answer 2

你的流体示例中有填充。真的，你做包装的方式是＆＃34;错误＆＃34; （不那么准确/有效）。它应该是

#wrapper {
width:1140px; margin:0 auto;
}

然后你的内容可以以百分比宽度浮动，通过媒体查询，你可以在断点处更改包装器的宽度。

为什么不使用像Bootstrap这样的框架？它会使这更容易/更快。