css - 溢出的 Div :auto disappears

Question

我有一个高度为 600px 宽度为 900px 的包装器 div

里面有2个div

第一个用下面的样式向左浮动

#left{
height : 100%;
width : 600px;
overflow:hidden;
float : left;
}

第二个没有 float ，这样可以占据剩余的空间，样式是

#right{
height : 100%;
overflow : auto;
margin-left : 600px;
}

以上设计旨在创建一个具有固定高度的 2 列布局。我使用的html是

<div class="wrapper">
  <div id="left">
    <img id="main-image" src="/some/image"/>
  </div>
  <div id="right"></div>
  <br clear="left"/>
</div>

问题是 Opera (v 10.01) 和 Safari (v. 4.0.3) 没有显示正确的 div。

当我删除 overflow:auto 时，他们会这样做。

我想不通为什么。任何帮助表示赞赏

谢谢

Answer 1

您可能不希望您的左边距等于您的左栏，因为它是 float 的。这通常是我们在 绝对定位 而不是 float 时使用的技巧。尝试一下，它可能会消失。

您所拥有的很可能是右侧的 div 被其内容加上边距推到视野之外。使用 overflow:auto 可能会引入滚动条并触发一些额外的调整大小……如果没有更多的标记和 CSS 就不知道了。祝你好运!