如何使用 CSS 自动调整包装器 div 的大小答案

【问题标题】：How to automatically resize the wrapper div using CSS如何使用 CSS 自动调整包装器 div 的大小
【发布时间】：2010-04-08 08:03:14
【问题描述】：

我一直在努力解决这个问题..

有一个包装 div，它包含 3 个垂直列 div，其中包含完整的文本，并且这个包装器 div 具有红色背景颜色，因此它可以是全文。

<div id="content_wrapper">

    <div id="cside_a">
       // massive texts goes here
    </div>

    ... // two more columns go here.

</div>

这是它们的 CSS 代码。

#content_wrapper
{
background-color:#DB0A00;
background-repeat:no-repeat;
min-height:400px;
}
#cside_a, #cside_b, #cside_c
{
float: left;
width: 33%;
}

这段代码给了我一个只覆盖 400px 高度框的背景.. 我的期望是包装器 div 会根据其中 div 的大小。

不知何故将“overflow:hidden”与包装 CSS 代码一起使一切正常。

我不知道为什么 "overflow:hidden" 有效.. 这不应该隐藏所有溢出的文本吗..？

谁能解释一下为什么？无论如何是正确的方法吗？

【问题讨论】：

溢出：自动工作。 “可见”不起作用.. :(这里发生了什么？

标签： css overflow wrapper hidden

【解决方案1】：

您的问题是由于您的列是浮动的。看看'Clearfix'

【讨论】：

啊！这篇文章给了我重要的学习内容。谢谢！

【解决方案2】：

你需要清除你的花车。在第三列之后添加以下内容。

<div class="clear"></div>

这是你的CSS

.clear {clear:both;float:none;}

【讨论】：

这会起作用，但需要额外的标记。不是我最喜欢的解决方案，演示文稿应该是（并保持）CSS 的东西。
理想情况下，我会使用高级 CSS 选择器来清除浮动，但在 IE6 中不兼容。这也不是我最喜欢的解决方案 - 但它是跨浏览器兼容的。