ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSを使用して画像の周りのテキストの回り込みの問題を解決するコード_エクスペリエンス交換

CSSを使用して画像の周りのテキストの回り込みの問題を解決するコード_エクスペリエンス交換

PHP中文网
PHP中文网オリジナル
2016-05-16 12:06:452149ブラウズ


上の図は、web サイト用にアーティストが作成した写真とテキストを含むニュース タイトルのリストです。表にレイアウトされています。右上部分と右下部分は 2 つのセルに分散されています。プログラムを実装するのは簡単ではありません。2 つのクエリに複数回分割し、一度に 4 項目を取得するか、一度に 5 項目を取得するか、または一度に 9 項目を取得して 2 つのセルに表示します。 wordのようにテキストと画像を互いに配置できるように画像のプロパティを設定することはできますか?このように、プログラムは画像に注意を払う必要がなく、画像を 1 回読み取って表示するだけで済みます。テスト後、画像の float 属性を left に設定すると問題を解決できます。効果は次のとおりです。


<div align="left"><img  src=/upload/20071208230527665.gif    style="max-width:90%"  style="max-width:90%" style="float:left;" / alt="CSSを使用して画像の周りのテキストの回り込みの問題を解決するコード_エクスペリエンス交換" > 
·新闻标题列表<br> 
·新闻标题列表<br> 
·新闻标题列表<br> 
·新闻标题列表<br> 
·新闻标题列表新闻标题列表<br> 
·新闻标题列表新闻标题列表<br> 
·新闻标题列表新闻标题列表<br> 
·新闻标题列表新闻标题列表<br> 
·新闻标题列表新闻标题列表 
</div>
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。