Question

我正在尝试创建我的第一个网站，我想制作一个部分，其中最近的帖子在左边，侧边栏在右边。我对定位它们没有任何问题，但问题是主要的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>

Answer 1

因为您已将#page-content内的元素浮动，所以您已将它们从页面的正常流程中取出。 #page-content在正常流程中没有内容，因此它会自行折叠，您无法看到给它的背景颜色。

您可以使用overflow技巧清除浮动元素：

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。

Answer 2

你也可以这样做，只需添加带有样式的div清除两个浮点数，这样它就会自动结算。

  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;
    }
  .clear
{ 
clear:both;
}


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

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

    <div class="clear"> </div>
        </div> <!-- page-content-->
      </body>
    </html>

嵌套子项不显示Div背景

2 个答案: