HTML/CSS で画像をテキストで囲むにはどうすればよいですか?

HTML/CSS で画像を囲むテキスト

質問:

画像を囲むテキスト ブロックを作成できますか?画像のような画像

答え:

もちろんです!この効果を実現するには、イメージ コンテナをフローティングする必要があります。方法は次のとおりです:

HTML コード:

<div>

CSS コード:

#container {
    width: 400px;
    background: yellow;
}

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

結果:

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

インタラクティブな例:

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

以上がHTML/CSS で画像をテキストで囲むにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。