浮遊画像を使用しているときにHTMLリストが縦に整列していません

Question

タイトル、テキスト、イメージのリストがあります。テキストが不十分な場合はリストが破損します。リストはそれ自身のネストを開始します。

<ul> 
    <li><img style="float:left"><h3>title</h3> ... some text here</li> 
    <li><img style="float:left"><h3>title</h3> ... some text here</li> 
    <li><img style="float:left"><h3>title</h3> ... some text here</li> 
</ul> 

私はここに例があります。

http://jsfiddle.net/2z6Zn/246/

img { 
 
    float: left; 
 
    margin-right: 0.1em; 
 
}

<ul> 
 
    <li> 
 
    <h3>photo</h3> 
 
    <img src="http://commons.cathopedia.org/w/images/commons/thumb/f/fe/Carnevale_di_Venezia.JPG/250px-Carnevale_di_Venezia.JPG" />some text next to the photo 
 
    </li> 
 
    <li> 
 
    <h3>photo</h3> 
 
    <img src="http://commons.cathopedia.org/w/images/commons/thumb/f/fe/Carnevale_di_Venezia.JPG/250px-Carnevale_di_Venezia.JPG" />some text next to the photo 
 
    </li> 
 
    <li> 
 
    <h3>photo</h3> 
 
    <img src="http://commons.cathopedia.org/w/images/commons/thumb/f/fe/Carnevale_di_Venezia.JPG/250px-Carnevale_di_Venezia.JPG" />some text next to the photo 
 
    </li> 
 
</ul>

この問題を修正するための最良の方法は何？

Answer 1

あなたが欠けている部分は、floatをクリアすることです。これを使用してください：

li:after { 
    content: ''; 
    display: block; 
    clear: both; 
} 

これで「ネスティング」が削除されました。それによって、それが呼び出されたとして、新鮮なブロック フォーマッティングコンテキストを作成し、次の次のコンテナの前にその浮動コンテナを使用している間、あなたがすべき常にclear

注意それらが。そうしないと、予期しない動作が発生することがあります（ ）。

以下

改訂デモ：

img { 
 
    float: left; 
 
    margin-right: 0.1em; 
 
} 
 
li:after { 
 
    content: ''; 
 
    display: block; 
 
    clear: both; 
 
}

<ul> 
 
<li> 
 
<h3>photo</h3> 
 
<img src="http://commons.cathopedia.org/w/images/commons/thumb/f/fe/Carnevale_di_Venezia.JPG/250px-Carnevale_di_Venezia.JPG" /> some text next to the photo 
 
</li> 
 
<li> 
 
<h3>photo</h3> 
 
<img src="http://commons.cathopedia.org/w/images/commons/thumb/f/fe/Carnevale_di_Venezia.JPG/250px-Carnevale_di_Venezia.JPG" /> some text next to the photo 
 
</li> 
 
<li> 
 
<h3>photo</h3> 
 
<img src="http://commons.cathopedia.org/w/images/commons/thumb/f/fe/Carnevale_di_Venezia.JPG/250px-Carnevale_di_Venezia.JPG" /> some text next to the photo 
 
</li> 
 
</ul>

Answer 2

あなたはすなわち

img { 
    float: left; 
    margin-right: 0.1em; 
} 

代わりにちょうどCSS

次追加 jSfiddleに適用されているCSSを削除します

Answer 3

/* This will make every element inside Li align in a line */ 

li * { 
    display: inline-block; 
} 
/* have specifically gave h3 element block property so that it can be in a separate line and serve as a heading */ 
    li h3 { 
    display: block; 
    } 

作業フィドル - http://jsfiddle.net/2z6Zn/247/