保持文本內聯

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的概念相同。記得永遠清除你的花車！ :)