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; }