html - 下に折り返さずに画像に対してテキストを浮かせる

Question

フローティング画像に対してテキストの段落があります。テキストが画像の側面によって形成された境界線に沿って留まるようにする方法はありますか?

CSS:

.textChunk {
  font-family: 'Special Elite', cursive;
  font-size: 20px;
  display: block;
  float: none;
  clear: both;
}

.leftPic {
  max-width: 35%;
  max-height: 35%;
  margin-right: 10px;
  float: left;
}

HTML

<div class="textChunk">
    <img class="leftPic" src="images/joshFace.png">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>

Answer 1

画像を html に合わせて左揃えにします。

.textChunk {
  font-family: 'Special Elite', cursive;
  font-size: 20px;
  display: block;
}

.leftPic {
  max-width: 35%;
  max-height: 35%;
  margin-right: 10px;
}

<div class="textChunk">
    // align="left" added
    <img class="leftPic" src="images/joshFace.png" align="left">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>