4列分割レイアウト

Question

4列<div>のレイアウトを作成しようとしています。

なぜ行コンテナがそれぞれの行の周りに境界線を描いていないのですか？ また、私のCSSがうまく書かれていて、ブラウザウィンドウの動的なサイズ変更のために、これは良いアプローチですか？

ご意見やご協力をいただければ幸いです。

Hereは私の現在の試みです。あなたの.rowに、あなたが適切に行が表示されます：;：

Answer 1

本質的には、「フローのうち、」divを取り、それは空のスペースの周囲に境界線を描画しています。 http://jsfiddle.net/gJJHs/

Answer 2

は「両方の明確ななしフロート」を追加します。しかし、あなたが探している流体の振る舞いやデザインについては、CSSのハッキングをしなくてもブラウザ間で一貫性を保つためにjavascript（jQuery Equal Height：http://www.jainaewen.com/files/javascript/jquery/equal-height-columns/など）を適用したいと思うでしょう。

Answer 3

左フロートです。あなたはfloatを使用している場合、自動にオーバーフローを設定する必要が

Answer 4

問題は、あなたの列を浮遊している、とあなたは物事をフロートするとき、彼らは事実上ゼロスペースを取ることのようです。

私は解決策は、あなたの「最後」クラスにフロートをキャンセルして、各行に「ダミー列」を追加すると思います。

このCSSは動作するようです：

.col 
{ 
    float: left; 
    width: 25%; 
} 

.last{ 
    clear: left; 
} 

.row{ 
    border: 1px solid green; 
} 

（ダミー最後の列を持つ）

改訂HTML：

<div class="row"> 
    <div class="col">1</div> 
    <div class="col">2</div> 
    <div class="col">3</div> 
    <div class="col">4</div> 
    <div class="last" /> 
</div> 

<div class="row"> 
    <div class="col">5</div> 
    <div class="col">6</div> 
    <div class="col">7</div> 
    <div class="col">8</div> 
    <div class="last" /> 
</div> 

Answer 5

さらに別のオプションは、他の回答に加えて、あなたにoverflow: hidden;を追加することです.row。

あなたが見た挙動の理由は、floatが通常の流れの外にdiv要素を取ることです。 divは、本質的にドキュメント内にスペースをとらない。

これは、イメージを浮かべて周囲にテキストをラップするための表面的な目的を考えると意味があります。次のpタグ（例えば）は、浮遊画像が存在しない、すなわち画像が重なっているように配置される。次に、ブラウザは画像の周りに 'p'タグ内のテキストをラップします。 （浮いた画像が「フローから削除」されなかった場合は、pタグが自然に所望の効果を与えていない画像—の下に表示されます。）

は、ここで私はコードを書くと思います方法です。

HTML：

<div class="row"> 
    <div class="col">1</div> 
    <div class="col">2</div> 
    <div class="col">3</div> 
    <div class="col">4</div> 
</div> 
<div class="row"> 
    <div class="col">5</div> 
    <div class="col">6</div> 
    <div class="col">7</div> 
    <div class="last">8</div> 
</div> 

CSS：フロートは流れから削除されるため要素が浮いて

.col 
{ 
    float: left; 
    width: 25%; 
} 
.row{ 
    border: 1px solid green; 
    overflow: hidden; /* "overflow: auto;" works just as well instead */ 
    width:100%;  /* Helps older versions of IE */ 
} 

Answer 6

は、その親はもはやそれが含まれています。フローティングされた要素は自然な流れから外れているので、フローティングされた要素がそこに存在しないかのようにすべてのブロック要素がレンダリングされるため、親コンテナは完全に展開されずにフローティングされた子要素を保持します。他の人のよう

The Mystery Of The CSS Float Property

：それは何かを境されていないよう:(CSSフロートプロパティがどのように動作するかのより良いアイデアを得るためには、次の資料を見てみましょう

そのため、borderは思えますあなたは.rowクラスにoverflow: auto;を追加する場合、それは問題の世話をするだろう、と述べている。ここでは、オーバーフローを使用する理由を説明する別の記事です。

http://www.quirksmode.org/css/clearing.html

私はこれが役に立ちそうです。
Hristo