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