html - 背景颜色不填充div

Question

例如，我希望我的包装器 div 具有红色背景色，并且当其他 div 放置在其中时它将填充。

但是，由于它使用边距居中：自动；并且其中的 div 向左浮动，颜色不会继续向下。如果我删除边距 auto 并用 float:left 替换它；然后颜色将继续正常。

我通过保持我的边距自动并使用溢出来解决这个问题：隐藏它允许颜色向下流动。但是对于我正在处理的这个站点，我需要保持溢出可见。

还有另一种方法可以让它工作吗？另外，如果您知道，您能否解释为什么溢出隐藏的工作方式如此。

谢谢

Answer 1

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

像这样...

<div id="container"> 

   <div id="colordiv">

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

  </div>

</div>

其中容器是一个自动边距的“容器”，颜色 div 是该容器的 100% 颜色填充。

这样你可以使主容器任意宽度，其余的将跟随，颜色一直持续到内容

在这里演示

另一个演示 - 更小的 div

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

Answer 2

display: flex将允许背景以与难以捉摸的方式相同的方式填充overflow: hidden。

然后，您必须应对：

• 边距不会崩溃 - 如果这对您很重要
• 设置对齐，如果你有一个现有的布局，这可能是微不足道的或复杂的

注意：一个缺点overflow: hidden是它打破了粘性定位。