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