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

結果:

コンテナの固定幅 (400px) ) と黄色の背景はテキスト ブロックを作成します。幅 150 ピクセルで背景が赤いフローティング画像 (#floated) が左側に配置され、その周囲にテキストを配置できます。

インタラクティブな例:

このテクニックのライブ デモンストレーションJSFiddle で見つけることができます: http://jsfiddle.net/kYDgL/