gpt4 book ai didi

html - Div 背景不会显示嵌套子项

转载 作者:太空宇宙 更新时间:2023-11-04 03:25:11 25 4
gpt4 key购买 nike

我正在尝试创建我的第一个网站,我想创建一个部分,其中最近的帖子在左侧,侧边栏在右侧。我对它们的定位没有任何问题,但问题是主 div 没有为其绘制背景。

如果我在 div 中放置任何原始文本,它会为原始文本正确绘制背景,但不会为任何 <div> 绘制背景在里面。

请注意,在代码片段中,文本是白色的,正文是黑色背景,页面内容 div 应该是灰色背景 #666但它没有出现。

body {
background: #000;
}

/* Page Content */
#page-content {
background:#666;
color: #FFF;
opacity: .8;
}

#recent-updates {
width: 75%;
float: left;

}

#sidebar-right {
width: 25%;
float: right;
}
<html>

<body>
<div id='page-content'>
<div id='recent-updates'>
OneOneOneOneOneOneOne
</div> <!-- recent-updates -->

<div id='sidebar-right'>
TwoTwoTwoTwoTwoTwoTwo
</div> <!-- sidebar-right -->
</div> <!-- page-content-->
</body>

</html>

最佳答案

因为您在 #page-content 中 float 了元素,所以您已将它们从页面的正常流中移除。 #page-content 在正常流程中没有内容,因此它会自行折叠,您看不到赋予它的背景颜色。

您可以使用 overflow 技巧清除 float 元素:

body {
background: #000;
}
#page-content {
background:#666;
color: #FFF;
opacity: .8;
overflow: hidden;
}
#recent-updates {
width: 75%;
float: left;
}
#sidebar-right {
width: 25%;
float: right;
}
<html>
<body>
<div id='page-content'>
<div id='recent-updates'>
OneOneOneOneOneOneOne
</div> <!-- recent-updates -->

<div id='sidebar-right'>
TwoTwoTwoTwoTwoTwoTwo
</div> <!-- sidebar-right -->
</div> <!-- page-content-->
</body>
</html>

如果您无法将 overflow: hidden 应用于 #page-content,请参阅 other float-clearing methods .

关于html - Div 背景不会显示嵌套子项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27171511/

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