Question

我正在构建一个响应式网页，并将所有外包装（包含正文）设置为100%宽度。问题是一些100％宽度的元素是在包装器之外的吗？

将浏览器的大小调整为1000像素以下。向下滚动一下然后使用水平滚动。你会看到一些元素在包装器之外，为什么？

我是否可能必须从px宽度移除100%，如下所示：

width: calc(100% - 16px);

删除填充（占用额外空间）？

Answer 1

如果你没有使用box-sizing，那么

padding会使元素更大：border-box

Answer 2

因为盒子模型。基本上宽度设置为100％，然后边距，边框和填充添加到推动内容超出您想要的位置。

是的，您可以删除填充，这应该可以解决问题，但是当块级元素自动占用可用的全宽时，您应该只能删除宽度，它将按预期工作。

您还可以使用box-sizing: border-box;告诉浏览器在宽度计算中包含填充。

如果没有真正查看您的代码，我认为这些是您问题的最佳解决方案。如果您想要更具体的帮助，请在jsFiddle中复制问题。

Answer 3

如果一个容器已经有一个宽度并且您正在考虑在后代上设置100％的宽度，那么NOPE您真正需要的是 auto ;）无论填充，边框和框模型是什么，结果将与您的意图相同。

* { box-sizing: border-box }及其前缀（如果需要，还有boxsizing.htc针对IE6-7的polyfill）也很整洁，但它会对您的布局产生巨大影响。我的意思是，这是你为整个项目做出的选择。 width: auto在更具体的情况下非常有用。

Answer 4

我认为这个宽度元素应该是％px元素

.postContainer .createdDateCon {
 width: 150px;
}