我正在构建一个响应式网页，并将所有外包装（包括正文）设置为100%宽度。问题是某些 100% 宽度的元素超出了包装器？
请看一下这个页面：http ://test.ufeed.se/
将浏览器的大小调整到 1000 像素以下。向下滚动一点，然后使用水平滚动。你会看到有些元素在包装之外，为什么？
我是否可能必须像这样px从100%宽度中删除：
width: calc(100% - 16px);
删除填充（需要额外空间）？
问问题
187 次
4 回答
3
如果您不使用 box-sizing:border-box，则填充会使元素更大
于 2013-04-14T17:43:09.263 回答
2
这是因为盒子模型。基本上宽度设置为 100%，然后将边距、边框和填充添加到将内容推送到您想要的位置之外。
是的，您可以删除填充，这应该可以解决问题，但是由于块级元素会自动占用可用的全部宽度，您应该能够删除宽度并且它会按预期工作。
您还可以使用box-sizing: border-box;which 告诉浏览器在宽度计算中包含填充。
在没有实际查看您的代码的情况下，我认为这些是您问题的最佳解决方案。如果您需要更具体的帮助，请在jsFiddle中复制问题。
于 2013-04-14T17:45:37.653 回答
1
了解width:auto 和 width:100%width: auto及其区别
如果容器已经有宽度并且您正在考虑在后代上设置 100% 的宽度，那么您真正需要的是自动；) 无论填充、边框和框模型如何，结果都将是相同的故意的。
* { box-sizing: border-box }它的前缀（boxsizing.htc如果需要，还有 IE6-7 的 polyfill）也很简洁，但它会对您的布局产生巨大影响。我的意思是，这是您必须为整个项目做出的选择。width: auto在更特殊的情况下很有用。
于 2013-04-14T17:54:13.287 回答
0
我认为这个宽度元素应该是 %px 元素
.postContainer .createdDateCon {
width: 150px;
}
于 2013-04-14T17:43:44.553 回答