嵌套 <DIV> 中未显示 CSS 背景色

标签 css html background

我无法让我的黄色背景颜色与显示在 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/

谢谢 干杯

最佳答案

overflow:auto 添加到包装器 div

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

jsFiddle example

float 内部 div 实质上使包装器 div 没有高度。通过添加 overflow:auto,它恢复了预期的行为。

关于嵌套 <DIV> 中未显示 CSS 背景色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21516097/

相关文章:

css - 当没有足够的数据来填充整行时,网格布局中的中心元素

JavaScript压缩器

html - 如何在两侧覆盖 2 张图像作为背景图像

charts - 谷歌图表改变背景颜色

jquery - 如何淡化变化的背景图像

javascript - 在悬停时突出显示表格行显示列之间的空白

html - 为什么我不能在 div 中将此图像居中?

html - H1标签 float 和SEO问题

javascript - 将 Javascript 嵌入到 HTML 参数中

css - 在线性梯度上使用背景位置的百分比值