Question

我想要复制Google主页，我想在div id页脚上填充背景颜色。但它不起作用。

这是我的代码：

http://codepen.io/jakzaizzat/pen/cqnIJ

Answer 1

<ul class="first">和<ul class="second">

左右浮动，

最好放<div class="clear"></div>

.clear { clear:both; }

在页脚中。

就像这样

   <div id="footer">
     <ul class="first">
       <li><a href="#">Advertising</a></li>
       <li><a href="#">Business</a></li>
       <li><a href="#">About</a></li>
      </ul>
      <ul class="second">
        <li><a href="#">Privacy & Terms</a></li>
        <li><a href="#">Settings</a></li>
        <li><a href="#">Use Google.com</a></li>
      </ul>
     <div class="clear"></div>
   </div>

或者使页脚内的ul显示内嵌块及其相应的宽度。

我在使用花车时正在做的其他解决方案。

它使用自动清除方法。 Yaaay！

.auto-clear:before, .auto-clear:after { content:" "; display:table; }
.auto-clear:after { clear:both; }

将auto-clear类放在浮动的父级上。

因此<div id="footer" class="auto-clear">可能会移除<div class="clear"></div>

所以就像这样

<div id="footer" class="auto-clear">
<-- content here -->
</div>

Answer 2

#footer {
  background-color:#e7e7e7;
  overflow:auto
}

试试这个。只需将“overflow：auto”添加到#footer，就会出现背景颜色。当你在容器div中有浮动div时，你通常必须处理容器div的overflow属性。

Answer 3

你没有任何背景颜色，因为你的嵌套div都有float:left一旦你在一个元素上使用浮动它会失去它的高度。

所以基本上你有一个0px高的包裹，没有颜色可见。您可以通过在第二个浮点div之后使用clear:fix添加另一个DIV来解决此问题，这将清除所有嵌套元素，并显示background-color:。

我希望这有助于你和你学到新的东西:) ...祝你的项目好运！

同样@Asbar答案也有效。我赞成了他的回答！

Answer 4

已编辑

Wesley Lachenal回答

为什么我无法在id页脚上创建背景颜色

4 个答案: