【发布时间】：2012-04-21 23:31:55
【问题描述】：
我有一个宽度为 75% 的图像和一个宽度为 25% 的 p-box，但它们不适合它们的父容器！
【问题讨论】：
标签： css percentage
【发布时间】：2012-04-21 23:31:55
【问题描述】：
问题在于 CSS width 实际上是指“内容宽度”。内边距和边框不算在内，因此您必须调整（减小）宽度以补偿它们。
见updated jsfiddle。请注意，我将20% 宽度更改为16%（补偿每侧的2% 边距），并将80% 更改为79% 以解决舍入问题。
注意：在较新的浏览器中，您可以强制对特定元素使用“传统”（Microsoft）框模型，然后width 将表示全宽，包括填充和边框。例如，请参阅 Cthulhu 的答案。
【讨论】：
-
但是我在任何地方都没有任何填充或边距？我什至使用 CSS 重置来消除它:)
-
您在
.flex-caption上有padding: 2%。 -
在 JSFiddle 上看不到任何这些：-(
-
@the0ther github 不再作为 jsfiddle 中 javascript 的外部 src 工作。试试jsfiddle.net/bmBnF/22
只需将-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; 添加到 .flex-caption：
http://jsfiddle.net/Cthulhu/bmBnF/2/
这是盒子模型错误，您可以在维基百科上阅读：http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug
【讨论】：
-
这还是不行...标题框仍然漂浮在图像下方:)
-
我不确定你的意思。我为您自己的 jsfiddle 提供了更新，该更新适用于我给您的解决方案。你能发送更多详细信息吗？
我会尝试调整一下：
.flexslider .slides img {
float: left; /* leave other properties */
}
.flex-caption {
width: 16%; /* leave others - width is 16% because you have a 2% padding around all sides ( 16 width + 2 left + 2 right */ )
}
【讨论】：
-
我就做个短五虎吧！ jsfiddle.net/bmBnF/6 似乎可以使用 float:left，并将宽度保留为 20% :)