保持文本内联

Question

我有一个图像浮动到左侧，然后是图像右侧的一些文本。然而，文本只是足够长的一段落的一行低于图像。如何让这段文字与段落保持一致，并防止其围绕图片缠绕？

Answer 1

如果您不想担心知道和设置任何宽度，您可以通过establishing a new block formatting context为文本容器做到这一点。

即对于标记：

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

所有你需要做的就是给<p>元素比“看得见”之外的溢出。例如：

p { overflow:auto; } 

使用的<img>保证金右一点点地从图像中的文本分离。

Answer 2

如果您的图片向左浮动，关键是有图像的至少width对任何元素的margin-left您的文本包含英寸

例如，如果你的HTML是一样的东西：

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

而且图像的宽度为160像素，你必须给你的款至少160像素一个margin-left（如果你给它margin-left这是略大于160像素它看起来更好）。

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

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

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的概念相同。记得永远清除你的花车！ :)