1

我有一个浮动到左侧的图像，然后是图像右侧的一些文本。但是，文本足够长，以至于段落的一行位于图像下方。如何使此文本与段落内联并防止其环绕图片？

4

4 回答 4

2

如果您的图像向左浮动，则诀窍是为您的文本包含的任何元素margin-left至少拥有图像的一个。width

例如，如果您的 HTML 类似于：

<img src="image.jpg">
<p>Some text

你的图片宽度是160px，你必须给你的段落amargin-left至少160px（如果你给它margin-left比160px稍微大一点，它看起来会更好）。

这就是浮动图像后您需要做的所有事情，只需margin-left在其后面的段落上设置。您甚至不需要为段落指定宽度。

演示http://dabblet.com/gist/2791183

于 2012-05-25T23:34:53.603 回答
2

如果您不想担心知道和设置任何宽度，您可以通过为文本容器建立一个新的块格式化上下文来做到这一点。

即对于标记：

<img src="image.jpg">
<p>Some text

您需要做的就是给<p>元素一个“可见”之外的溢出。例如：

p { overflow:auto; }

在 上使用一点边距<img>将文本与图像分开。

于 2012-05-26T00:36:41.613 回答
1

您需要分别浮动图像元素和文本元素。我认为您还需要为这两个元素指定宽度。

<img src"url()" style="float:left; width:100px;">
<div id="text" style="float:left; width:500px;">Words</div>
于 2012-05-25T23:36:23.257 回答
1

如果您不将文本放置在另一个块元素中，那么它将始终环绕该另一个浮动元素。浮动的工作方式是从“文档流”中取出一个元素，这里有一些关于浮动如何工作的更具体的信息。让您的文本不换行的唯一方法是将其放在块元素（如div标签）内，然后将该元素与浮动图像一起浮动到左侧。

例子：

<div style="overflow: auto;">
    <img src="hello.jpg" style="float: left; width: 200px;">
    <div style="float: left; width: 700px;">
        Hello!!!
    </div>
</div>

第一个overflow: auto将声明容器的高度。clear: both这与在图像和文本 div 下方添加 div 标签的概念相同。记住要经常清理你的花车！:)

于 2012-05-25T23:39:37.997 回答