html - 背景颜色不填充div

标签 html css

举个例子,我希望我的包装 div 具有红色背景颜色,并且当其他 div 放置在其中时它会向下填充。

然而,由于它使用 margin: auto; 居中;并且它里面的div是 float 的,颜色不会继续向下。如果我删除 margin auto 并将其替换为 float:left;然后颜色将继续,因为它应该。

我通过保持 margin auto 并使用 overflow: hidden 来解决这个问题,它允许颜色向下流动。但是,对于我正在处理的这个站点,我需要保持溢出可见。

还有其他方法可以让它发挥作用吗?另外,如果您知道,能否解释一下为什么 overflow hidden 以这种方式工作。

谢谢

最佳答案

解决方法是在该 div 中放置一个 div...

像这样...

<div id="container"> 

   <div id="colordiv">

   <div></div>
   <div></div>
   <div></div>

  </div>

</div>

容器是自动设置边距的“容器”,颜色 div 是该容器的 100% 颜色填充。

这样你可以让主容器任意宽度,其余的将跟随,颜色一直延伸到内容

DEMO HERE

ANOTHER DEMO - smaller divs

至于你的溢出问题....我完全不确定为什么会这样

关于html - 背景颜色不填充div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17055372/

相关文章:

javascript - ReactJs 重复使用相同的组件但具有不同的样式

javascript - 通过figure id访问figcaption和img

javascript - jquery 交换元素上的图像单击不起作用

html - 在 CSS 中指定 "px"时字体大小如何?

jquery - 没有 jQuery Mobile 的 ListView

html - 无法加载 Gridset Firefox 样式表

iphone - iPhone/Android 专用 CSS

javascript - 如何在 TextView 输入中插入数字/文本?

html - 防止 HTML 表格调整大小以适应内容

html - Colspan 和表格布局 :fixed break my table style