Question

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

您好，我目前正在使用<div>和“float”属性进行网页布局。

如上图所示，我的页面布局使用<div>分为3个部分：
<div id="header">，标有红色框
<div id="content">，标有绿框
<div id="footer">，标有黄色框

然后我进一步将内容分为两部分（左和右）：

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

左边的div将包含元素“a”（位于左上角）和“b”（位于左下角），而右边的元素只包含“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，因为我希望在包含b和c之后内容部分会展开，但看起来它不包含任何元素。相反，b和c中的内容与页脚重叠。

我确实尝试在CSS中使用“clear：both”作为页脚 - 这似乎解决了重叠问题，但内容根本没有扩展！（身高= 0）

有什么方法可以解决这个问题吗？

感谢。

Answer 1

添加overflow:auto

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

<强> DEMO

Answer 2

嗯，你写的代码似乎在IE上工作正常。

（HTML + CSS）使用div和float的页面布局

2 个答案: