Question

我有一个浮动到左侧的图像，然后是图像右侧的一些文本。然而，文本足够长，以至于段落的一行位于图像下方。如何让这段文字与段落内联并防止它缠绕在图片上？

Answer 1

如果您的图片浮动到左侧，诀窍是至少包含margin-left图片的width，以获取包含文字的任何元素。

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

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

图片的宽度为160px，你必须给你的段落margin-left至少160px（如果你给它margin-left稍微大于160px它会看起来更好）。< / p>

在浮动图像后，您只需要设置margin-left就可以了。您甚至不需要为段落指定宽度。

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

Answer 2

如果您不想担心知道并设置任何宽度，可以通过establishing a new block formatting context为文本容器执行此操作。

即。对于标记：

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

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

p { overflow:auto; }

在<img>上使用一点边距，将文字与图片分开。

Answer 3

您需要分别浮动图像元素和文本元素。我想你还需要指定两个元素的宽度。

<img src"url()" style="float:left; width:100px;">
<div id="text" style="float:left; width:500px;">Words</div>

Answer 4

如果您不将文本放在另一个块元素中，那么它将始终环绕其他浮动元素。浮动工作的方式是从“文档流程”here's some more specific information on how floats work中取出一个元素。让文本不换行的唯一方法是将它放在块元素（如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将声明容器的高度。这与在图像和文本div下面的div标签中添加clear: both的概念相同。记得要随时清理你的花车！：）

保持文本内联

4 个答案: