divタグが正しく

を整合していない私は、divタグを持つ奇妙な問題が実際にこれらのdivタグが単一の容器に整列し、グループ化され得るが、ここでは本当に愚かな問題の何かが私のコード#footer .col_threeで今divタグが正しく

<html> 
<head> 
<style> 
    body { 
     padding: 0 2%; 
    } 
    #footer { 
    width: 100 %; 
     clear: both; 
     border: 1px solid #CCC; 
    } 
    #footer .col_one { 
     float: left; 
     width: 25%; 
     border: 1px solid #CCC; 
    } 
    #footer .col_two { 
     float: left; 
     width: 25%; 
     border: 1px solid #CCC; 
    } 
    #footer .col_three { 
     float: left; 
     width: 24%; 
     border: 1px solid #CCC; 
    } 
    #footer .col_four { 
     float: left; 
     width: 25%; 
     border: 1px solid #CCC; 
    } 
</style> 
</head> 
<body> 
    <div id="footer"> 
     <div class="col_one"> 
      &nbsp; something here 
     </div> 
     <div class="col_two"> 
      &nbsp; something here 
     </div> 
     <div class="col_three"> 
      &nbsp; something here 
     </div> 
     <div class="col_four"> 
      &nbsp; something here 
     </div> 
     <div style="clear: both"> 
     </div> 
    </div> 
</body> 
</html>

です私が幅を24％にすると、すべてのボックスが正しい順序で表示されますが、最後のボックスが最初のボックスの直下に来るのは25％になります。なぜそうですか？合計フッターコンテナは100％で、幅がそれぞれ25％の4つのdivボックスがあります。間違った英語を理解して申し訳ありません。

出典

2011-10-17 Keshav Nair

をシフトダウンする必要が設定した幅は、コンテンツの幅であるためです。すなわち、パディング、マージン、ボーダーは除きます。合計幅は100％+ 8pxです（4divの両側に1pxの境界線があります）。そのために適合しません。

これはdivに余分なdivを入れることで解決できます。外側のdivは、境界なしで25％の幅になります。内側のdiv要素は、あなたが国境はなく、明示的な幅を与えることができ、それはその親を記入します：私はそれらのdiv要素に別々のクラスを置くことによって、セレクタを少し変更する自由を取った

http://jsfiddle.net/GolezTrol/fm7LV/1/

： col one col_oneの代わりに。これにより、すべての列に .colセレクタを使用し、特定の列をスタイルする必要がある場合には .col.oneセレクタを使用することができます。 :)

出典

2011-10-17 17:59:25 GolezTrol

woooはすばらしかった。 –

境界線を取り除くと、それらがうまくいくはずです。ブラウザは、各divの幅とパーセンテージのピクセル数を計算します。あなたは（境界線との）余分なピクセルを追加するとdiv要素の幅の合計は、ウィンドウ幅、より多くのであり、彼らが

#footer{ 
    width: 100 %; 
    clear: both; 
} 
#footer .col_one,.col_two,.col_three,.col_four{ 
    width:25%; 
    float:left; 
}

出典

2011-10-17 17:59:03

答えて

関連する問題