0

私は非常に基本的な2列のレイアウトを持っています。最初の列の背景色は白、2番目の列は緑です。私はそれを非常に簡単にやっています：

#col1 { 
  background-color: white; 
  float: left; 
}

#col2 { 
  background-color: green
}

<div id="col1">

</div>
<div id="col2">
  <!-- green background, and needs to fill up the remaining width, so i can't float left */ 
</div>

列2がページの幅全体に広がり、列1の後ろにあるのはなぜですか。2つの列が欲しいのですが、1つは固定幅で、もう1つはページの残りの部分を使い果たします。

とてもシンプルなようです。これを行うためのより良い方法はありますか？

これがフィドルです：http： //jsfiddle.net/yrkrJ/1/

4

2 に答える 2

0

最初のDIVにfloatを定義するためです。したがって、2番目のdivは高さを認識しません。このように書く

#col2 {
    overflow:hidden;
}

これをチェックしてくださいhttp://jsfiddle.net/yrkrJ/4/

詳細については、こちらをお読みくださいhttp://www.quirksmode.org/css/clearing.html

于 2012-09-11T05:06:04.160 に答える
0

こんにちは今与えるoverflow:hidden

このように

#header-banner {
    overflow:hidden;
}

デモ

于 2012-09-11T05:04:57.933 に答える