0

我试图将图像浮动到文本块的左侧并在两者之间保持微小的间隙，但是我不希望文本在图像下方蛇行。这就是我要的：

------- ------------
| 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吗？

4

2 回答 2

2

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

事实上，Paul Irish 建议使用CSS 规则，* { box-sizing: border-box; }因为它可以让您免于计算尺寸的麻烦，而且对浏览器性能和页面呈现的影响微乎其微。

于 2013-03-16T15:51:08.773 回答
1

box-sizing: border-box在您添加填充的元素上使用。这导致填充成为其宽度计算的一部分。

http://jsfiddle.net/ExplosionPIlls/jqjqd/1/

替代解决方案：

而不是在容器上使用float: left使用display: inline-block和。white-space: nowrap这将迫使元素保持在一行。

您还需要在各个元素上进行设置white-space: normal，以便它们可以随内容增长并保持与顶部对齐。vertical-align: top全部一起：

#container {
    width: 95%;
    overflow: auto;
    height: 50px;
    white-space: nowrap;
}
.theimage {
    display: inline-block;
    width: 20%;
    padding-right: 10px;
    white-space: normal;
    vertical-align: top;
}   
.thetext {
    display: inline-block;
    width: 80%;
    white-space: normal;
    vertical-align: top;
}

这会导致水平滚动条打开#container（因为填充会导致其内容的总宽度超过 100%）。

http://jsfiddle.net/ExplosionPIlls/jqjqd/

于 2013-03-16T15:51:30.237 回答