1

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 ，因为我希望内容部分在包含 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 回答