Question

所以我遇到了这个问题，其中溢出：隐藏在容器中的div上将限制divs宽度，当它应该是流动的。所以基本上我有一个类似的结构：

<div id="container">
    <div id="leftColumn">
        //content
    </div>
    <div id="rightColumn">
        //content
    </div>
</div>

在这种情况下，leftColumn div具有固定宽度，rightColumn应该是流动的并填充剩余的宽度。问题是，当我添加overflow：hidden到rightColumn（它有一个背景颜色）时，宽度会缩小到我给它的最小宽度。有没有办法让它扩展到剩余的宽度空间？以下是我目前对CSS的看法：

#container {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    min-width: 800px;
}

#leftColumn {
    margin: 0px 0px 0px 0px;
    padding: 10px 10px 10px 10px;
    width: 230px;
    position: relative;
    float: left;
}

#rightColumn {
    margin: 0px 0px 0px 250px;
    padding: 10px 10px 10px 10px;
    min-width: 530px;
    overflow: hidden;
    background: #fff;
}

思想？

Answer 1

它对我有用（FF 3.6.13）。检查并查看页面上是否还有其他内容（样式或元素）可能会产生干扰。还要检查不同的浏览器如果您在测试时手动更改页面，请确保在浏览器上进行硬刷新（Ctrl-F5）以确保加载新样式。

Answer 2

它完全按照你在我的小提琴中所描述的那样工作...缩小到min-width并应用了overflow : hidden。

我讨厌不必要地嵌套div，但可能这是一个可能适合你的场景？

http://jsfiddle.net/cVNaJ/

我将您的右栏变成了'包装'，其中overflow : hidden内容包含在以原始名称命名的子div中。也许这会有所帮助吗？

CSS溢出：div的隐藏限制宽度

2 个答案: