css段落不是浮動div

Question

我的浮動工程...有點.. ..但我有一個問題時，調整我的瀏覽器。當屏幕變小時，我希望文本環繞在div上，但是它只是向底部的一長串文本中的右邊壓扁。

這是一些圖片。

這是當它是更廣泛的

，然後這是它在做什麼，當我調整瀏覽器

我的HTML一種看起來像這樣

<div class="info"> 
    <div class="userInfo"> 
     <p>info here</p> 
     <img> 
    </div> 
    <div class="bio"> 
     <p>paragraph</p> 
     <p>paragraph</p> 
     <p>paragraph</p> 
    </div> 
</div> 

和我的CSS看起來像這樣

.userInfo{ 
    float: left; 
} 

.bio p{ 
    padding-left: 14em; 
} 

Answer 1

您將不得不在同一個div中移動段落作爲圖像，並浮動實際圖像。事情是這樣的：http://jsfiddle.net/cLcJu/

正如你所看到的代碼非常簡單：

<div class="userInfo"> 
    <p>some content above the image</p> 
    <img src='path_to_image'> 
    <p>A bunch of content to the right of and underneath the image</p> 
</div> 

和CSS

.userInfo img { 
    display: block; 
    float: left; 
    padding: 10px;  
} 

Answer 2

這應該工作：

HTML

<div class="info"> 
    <div class="userInfo"> 
     <p>info here</p> 
     <img src="image"> 
     <p>paragraph</p> 
    </div> 
</div> 

CSS

.userInfo img { float: left; }