html - 如何使用 % 定义的宽度但 px 定义的填充将两个 div 彼此相邻 float

Question

我试图将图像 float 到文本 block 的左侧并在两者之间保持微小的间隙，但我不希望文本在图像下方蜿蜒。这就是我想要的:

------- ------------
| pic | |   text   |
------- |          |
        |          |
        |          |
        ------------

如果所有元素的宽度和大小都是 px 定义的，这会很容易，但它们是 % 定义的:

<div id="container">
  <div class="theimage"><img src=img.jpg"></div>
  <div class="thetext">blah blah</div>
</div>

#container {width: 95%; overflow: auto}
.theimage {float: left; width: 20%}
.theimage img {width: 100%}
.thetext {float: left; width: 80%}

上面的这个工作正常。但是，如果我随后将 padding-right: 10px 添加到 theimage 以在图像和文本之间创建一个间隙，thetext 将落在 theimage 而不是漂浮在它旁边。

对于在 theimage 和 thetext 之间建立差距有什么帮助吗？

Answer 1

尝试使用属性 box-sizing: border-box。在正常的 content-box 模型下，元素的填充不包括在高度计算中，因此您将 10px 添加到图像的 20%，因此图像和文本的总和将为 20% + 10px + 100%，这当然超过了父宽度。

事实上，Paul Irish recommends using CSS 规则，* { box-sizing: border-box; }，因为它会让你免去计算维度的麻烦，而且对浏览器性能和页面呈现的影响微乎其微。