Question

我无法将黄色背景颜色显示在3个单独列中显示的嵌套div中。我做错了什么？

<div id="wrapper">
   <div class="rightside">
   Test
   </div>
   <div class="rightside">
   Test
   </div>    
   <div class="rightside">
   Test
   </div>    
</div>

下面的CSS：

#wrapper {

  background-color: yellow;

}

div.rightside {

  width: 31%;
  margin: 0 1.33333em 0 0;
  display:inline;
  float:left;   

}

这是我的jsfiddle：http://jsfiddle.net/yPX5Q/2/

由于干杯

Answer 1

将overflow:auto添加到您的包装器div

#wrapper {
    background-color: yellow;
    overflow:auto;
}

<强> jsFiddle example

浮动内部div基本上给包装器div没有高度。通过添加overflow：auto，它会带回预期的行为。

Answer 2

您可以在父容器上设置overflow:hidden; http://jsfiddle.net/yPX5Q/3/，或者使用带有伪元素或额外元素的clearfix方法。

有关浮动元素的更多信息：http://css-tricks.com/all-about-floats/

CSS背景颜色未显示在嵌套的<div> </div>中

2 个答案: