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