1

http://imageshack.us/photo/my-images/171/screenshot01p.png/

こんにちは、私は現在<div>、「float」属性を使用して行われる Web ページのレイアウトに取り組んでいます。

<div>上の画像に示すように、私のページ レイアウトは:を使用して 3 つのセクションに分割され
<div id="header">、赤いボックス
<div id="content">でマークされ、緑色のボックス
<div id="footer">でマークされ、黄色のボックスでマークされます

次に、コンテンツをさらに 2 つの部分 (左と右) に分割します。

<div id="left">
<div id="right">

左の div には要素 "a" (左上に配置) と "b" (左下に配置) が含まれ、右の div には "c" のみが含まれます。

これを実装するための私のコードは次のとおりです。

<div id="header"></div>

<div id="content">
    <div id="left">
        <div id="topleft">a</div>
        <div id="bottomleft">b</div>
    </div>
    <div id="right">c</div>
</div>

<div id="footer"></div>

そしてここにCSSがあります

#header {
border: 5px solid red;
}

#content {
    border: 5px solid greenyellow;
    width: 1024px;    
    height: auto;   
}

#footer {
    border: 5px solid yellow;
}

#left {
    float: left;
    width: 480 px;
    border: 1px solid black;        
}

#topleft {
    border: 1px solid black;  
}

#bottomleft {
    border: 1px solid black;  
}

#right {
    float: left;
    width: 480 px;
    border: 1px solid black;        
}

#content で height: auto を使用したのは、コンテンツ セクションが ab と c を含む後に展開されることを期待していたからですが、要素が含まれていないように見えました。代わりに、ab と c のコンテンツがフッターと重なってしまいました。

フッターの CSS で「clear: both」を使用してみました。これでオーバーラップの問題は解決したようですが、それでもコンテンツはまったく展開されませんでした。(高さ = 0)

これを修正する方法はありますか？

ありがとう。

4

2 に答える 2

2

追加overflow:auto

#content {
    border: 5px solid greenyellow;
    width: 1024px;    
    height: auto;  overflow:auto 
}

デモ

于 2013-03-11T12:12:48.617 に答える
0

さて、あなたが書いたコードは IE でうまく動作するようです。

于 2013-03-11T12:43:36.137 に答える