Html 将固定css问题转换为流动css问题

我正在创建一个快速响应的网站。我采用像素宽度，并使用target÷context=result将其转换为流体。修复后，所有东西都完全适合1140包装，但当我将所有东西转换为流体时，它不会填满整个1140px宽度的包装。我不知道我做错了什么

你可以看到这里所有的东西是如何排列的，以及流体上3列的总宽度是如何更窄：

它们的宽度不应该完全相同吗？

---

谢谢

流体示例上有填充。但实际上，您使用的包装方式是“错误的”（没有那么准确/高效）。应该是

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

然后，您的内部内容可以以一定的宽度浮动，通过媒体查询，您可以在断点处更改包装的宽度

---

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

这是因为您错误地计算了列

边距

和

宽度

的百分比

由于您在

部分#hp cols上使用
10px
，因此两侧填充
10px
的部分的内部宽度是
1120px，而不是
1140px。如果使用
宽度：31.57894%
（
360px
除以
1140px
）对于您的列，它将为您的列提供
353px
宽，而不是
360px
（因为
1120px
的
31.57894%
是
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 */
}

这是流体宽度页的和。我还制作了和固定宽度的页面进行比较

希望能有所帮助：）
为什么不使用像Bootstrap这样的框架？**在某些方面是的，这可能更容易，但我自己做，因为我想学习这一点，如果可能的话，从头开始构建。通过在包装上设置一个宽度，这不是变成了一个固定的宽度吗？我不想在包装上设置断点，我希望它是完全流动的。我之所以在包装纸上留有上边距是因为页眉是固定的。你在问题中使用了流体的精确数字。就是这样-谢谢！我完全忘记了边界框！