文繞圖為實務上常見需求，若只使用 <img> 與 <div>，則 <img> 與 <div> 會各自一行顯示，可使用 CSS 對 <img>設定 float 達成文繞圖。
Version
CSS 3
Text with Image
一行圖片一行文字，沒有達成文繞圖。
<template>
<img src="./assets/ilta.png" alt="ilta">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci deserunt laudantium optio, quidem reprehenderit sed soluta vitae? Accusamus aspernatur ea laboriosam modi, nihil obcaecati possimus quam ratione, tempore, tenetur voluptate? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio itaque iusto labore molestiae nostrum totam, voluptatum! Aperiam cum debitis deleniti dolorem error, in labore magnam minus molestias nihil placeat Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aspernatur aut dignissimos explicabo laboriosam maiores minima necessitatibus numquam odit pariatur placeat possimus qui recusandae rem, sapiente totam ut voluptas. Temporibus!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci deserunt laudantium optio, quidem reprehenderit sed soluta vitae? Accusamus aspernatur ea laboriosam modi, nihil obcaecati possimus quam ratione, tempore, tenetur voluptate? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio itaque iusto labore molestiae nostrum totam, voluptatum! Aperiam cum debitis deleniti dolorem error, in labore magnam minus molestias nihil placeat Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aspernatur aut dignissimos explicabo laboriosam maiores minima necessitatibus numquam odit pariatur placeat possimus qui recusandae rem, sapiente totam ut voluptas. Temporibus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aspernatur cum, deserunt ea et eum excepturi fugiat harum ipsa ipsum maxime nam quam. Esse ex, ipsam nam quas reiciendis similique?</div>
<img src="./assets/ilta.png" alt="ilta">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci deserunt laudantium optio, quidem reprehenderit sed soluta vitae? Accusamus aspernatur ea laboriosam modi, nihil obcaecati possimus quam ratione, tempore, tenetur voluptate? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio itaque iusto labore molestiae nostrum totam, voluptatum! Aperiam cum debitis deleniti dolorem error, in labore magnam minus molestias nihil placeat Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aspernatur aut dignissimos explicabo laboriosam maiores minima necessitatibus numquam odit pariatur placeat possimus qui recusandae rem, sapiente totam ut voluptas. Temporibus!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci deserunt laudantium optio, quidem reprehenderit sed soluta vitae? Accusamus aspernatur ea laboriosam modi, nihil obcaecati possimus quam ratione, tempore, tenetur voluptate? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio itaque iusto labore molestiae nostrum totam, voluptatum! Aperiam cum debitis deleniti dolorem error, in labore magnam minus molestias nihil placeat Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aspernatur aut dignissimos explicabo laboriosam maiores minima necessitatibus numquam odit pariatur placeat possimus qui recusandae rem, sapiente totam ut voluptas. Temporibus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aspernatur cum, deserunt ea et eum excepturi fugiat harum ipsa ipsum maxime nam quam. Esse ex, ipsam nam quas reiciendis similique?</div>
</template>
<img> 在 <div> 之前且沒有搭配任何 CSS，由於 <div> 是 block element，因此文字會換行，無法達成文繞圖。
Wrap Text Around Image
希望能文繞圖，且將圖片放在文字左側或右側。
<template>
<img src="./assets/ilta.png" class="leftImg" alt="ilta">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci deserunt laudantium optio, quidem reprehenderit sed soluta vitae? Accusamus aspernatur ea laboriosam modi, nihil obcaecati possimus quam ratione, tempore, tenetur voluptate? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio itaque iusto labore molestiae nostrum totam, voluptatum! Aperiam cum debitis deleniti dolorem error, in labore magnam minus molestias nihil placeat Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aspernatur aut dignissimos explicabo laboriosam maiores minima necessitatibus numquam odit pariatur placeat possimus qui recusandae rem, sapiente totam ut voluptas. Temporibus!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci deserunt laudantium optio, quidem reprehenderit sed soluta vitae? Accusamus aspernatur ea laboriosam modi, nihil obcaecati possimus quam ratione, tempore, tenetur voluptate? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio itaque iusto labore molestiae nostrum totam, voluptatum! Aperiam cum debitis deleniti dolorem error, in labore magnam minus molestias nihil placeat Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aspernatur aut dignissimos explicabo laboriosam maiores minima necessitatibus numquam odit pariatur placeat possimus qui recusandae rem, sapiente totam ut voluptas. Temporibus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aspernatur cum, deserunt ea et eum excepturi fugiat harum ipsa ipsum maxime nam quam. Esse ex, ipsam nam quas reiciendis similique?</div>
<img src="./assets/ilta.png" class="rightImg" alt="ilta">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci deserunt laudantium optio, quidem reprehenderit sed soluta vitae? Accusamus aspernatur ea laboriosam modi, nihil obcaecati possimus quam ratione, tempore, tenetur voluptate? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio itaque iusto labore molestiae nostrum totam, voluptatum! Aperiam cum debitis deleniti dolorem error, in labore magnam minus molestias nihil placeat Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aspernatur aut dignissimos explicabo laboriosam maiores minima necessitatibus numquam odit pariatur placeat possimus qui recusandae rem, sapiente totam ut voluptas. Temporibus!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci deserunt laudantium optio, quidem reprehenderit sed soluta vitae? Accusamus aspernatur ea laboriosam modi, nihil obcaecati possimus quam ratione, tempore, tenetur voluptate? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio itaque iusto labore molestiae nostrum totam, voluptatum! Aperiam cum debitis deleniti dolorem error, in labore magnam minus molestias nihil placeat Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aspernatur aut dignissimos explicabo laboriosam maiores minima necessitatibus numquam odit pariatur placeat possimus qui recusandae rem, sapiente totam ut voluptas. Temporibus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aspernatur cum, deserunt ea et eum excepturi fugiat harum ipsa ipsum maxime nam quam. Esse ex, ipsam nam quas reiciendis similique?</div>
</template>
<style>
.leftImg {
float: left;
margin-right: 20px;
}
.rightImg {
float: right;
margin-left: 20px;
}
</style>
第 9 行
.leftImg {
float: left;
margin-right: 20px;
}
float: left：圖片的空間會消失，變成浮在畫面左側，因此達成文繞圖margin-right: 20px：讓圖片與文字有間隔增加美觀
14 行
.rightImg {
float: right;
margin-left: 20px;
}
float: right：圖片的空間會消失，變成浮在畫面右側，因此達成文繞圖margin-left: 20px：讓圖片與文字有間隔增加美觀
Conclusion
- 當設定文繞圖時，別忘了
<img>要放在<div>之前