gpt4 book ai didi

css - (HTML+CSS) 使用 div 和 float 的页面布局

转载 作者:行者123 更新时间:2023-11-28 13:22:19 25 4
gpt4 key购买 nike

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

我确实尝试在 CSS 中为页脚使用“clear: both”——这似乎解决了重叠问题,但内容仍然没有展开! (高度 = 0)

有什么办法可以解决这个问题吗?

谢谢。

最佳答案

添加overflow:auto

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

DEMO

关于css - (HTML+CSS) 使用 div 和 float 的页面布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15338198/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com