3各行に2列目のボックスが並んでいません。 JSフィドル

Question

私は3つのボックス、ボックス、画像、見出し、テキストを含む2つの行を持っています。 2番目の行は整列しません。私はあなたに私の問題を表示するには、このためにJSフィドルを設定している：

http://jsfiddle.net/2QJhN/

問題は何ですか？私は間違っているか、あるいは両方を逃したのですか？

Answer 1

浮動小数点数は、複数の行に置くと奇妙なことがあります。 1つの解決方法は、各列の後に隠しdivを追加して並べ替えることです。通常の慣例では、このCSSで、「クリア」、それにクラス名を与えることです：

.clear 
{ 
    clear: both; 
    display: block; 
    height: 0; 
    overflow: hidden; 
    visibility: hidden; 
    width: 0; 
} 

http://jsfiddle.net/2QJhN/3/

EDIT：この問題を解決するためにさまざまな方法がたくさんあるのでご注意ください、あなたがラップすることができますDIVの各行には他のCSSがいくつかあります。あなたの場合、まだ余分なDIVです。

あなたはそれをクラス名 "clearfix" 与えると思います：あなたが最初の行の後にこのコードを入れ

.clearfix:after, .windowContent:after, .pane:after   
{ 
    clear: both; 
    content: " "; 
    display: block; 
    font-size: 0; 
    height: 0; 
    visibility: hidden; 

}

* html .clearfix , * html .windowContent , * html .pane 
{ 
    zoom: 1; 
} 
*:first-child+html .clearfix , *:first-child+html .windowContent, *:first-child+html .pane 
{ 
    zoom: 1; 
} 

Answer 2

を。あなたがブラウザを使用している

<div style="clear:both"></div> 

http://jsfiddle.net/DSGCv/1/