免責事項
浮動要素の横にあるリストは問題を引き起こします。私の意見では、この種のフローティングの問題を回避する最良の方法は、コンテンツと交差するフローティング画像を回避することです。また、レスポンシブデザインをサポートする必要がある場合にも役立ちます。
段落の中央に画像を配置するシンプルなデザインは非常に魅力的に見え、派手になりすぎるよりもはるかに簡単にサポートできます。また、から一歩離れてい<figure>ます。
しかし、私は本当に浮遊画像が欲しいです！
[OK]を、あなたがしているそうだとすれば狂っこの道を継続するための永続的なことに、使用することができますカップルの技法があります。
最も簡単なのは、リストを使用するoverflow: hiddenかoverflow: scroll、リストを本質的に縮小ラップして、パディングを使いやすい場所に戻すことです。
img {
float: left;
}
.wrapping-list {
overflow: hidden;
padding-left: 40px;
}
<img src="http://placehold.it/100x100"/>
<ul class="wrapping-list">
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
</ul>
ただし、この手法にはいくつかの問題があります。リストが長くなると、実際には画像が折り返されないためfloat、画像で使用する目的全体がかなり損なわれます。
img {
float: left;
}
.wrapping-list {
overflow: hidden;
padding-left: 40px;
}
<img src="http://placehold.it/100x100"/>
<ul class="wrapping-list">
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
</ul>
しかし、本当にリストをラッピングしたいです！
わかりました。もしあなたがもっともっともっと固執していて、あなたが絶対にこの道を進む必要があるなら、リスト項目を包み、箇条書きを維持するために使用できる別のテクニックがあります。
をパディング<ul>して弾丸でうまく動作するようにしようとするのではなく（そうしたくないようです）、それらの弾丸をから離し<ul>て<li>sに渡します。弾丸は危険であり、<ul>適切に処理するのに十分な責任はありません。
img {
float: left;
}
.wrapping-list {
padding: 0;
list-style-position: inside;
}
.wrapping-list li {
overflow: hidden;
padding-left: 25px;
}
<img src="http://placehold.it/100x100"/>
<ul class="wrapping-list">
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
</ul>
この折り返し動作は、複雑なコンテンツに対して奇妙なことを行う可能性があるため、デフォルトで追加することはお勧めしません。上書きする必要があるものではなく、オプトインできるものとして設定する方がはるかに簡単です。
