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