如何在 HTML/CSS 中使文字環繞圖像？

在HTML/CSS 中文字環繞影像

問題：

我們可以建立一個環繞影像的文字區塊嗎？圖像就像圖像提供嗎？

答：

當然可以！為了達到這種效果，需要使影像容器浮動。操作方法如下：

HTML 程式碼：

<div>
<h3 id="CSS-程式碼">CSS 程式碼：</h3>
<pre class="brush:php;toolbar:false">#container {
    width: 400px;
    background: yellow;
}

#floated {
    float: left;
    width: 150px;
    background: red;
}

結果：

容器的固定寬度（400 像素）和黃色背景創建一個文字區塊。寬度為 150 像素、紅色背景的浮動圖像 (#floated) 位於左側，允許文字在其周圍流動。

互動範例：

此技術的現場示範可在 JSFiddle 上找到：http://jsfiddle.net/kYDgL/