Question

我使用此代码创建2列布局：

<style type="text/css">
#column-wrap {
    float: left;
    width: 100%;
}
#column1 {
    background-color: red;
    width: 200px;
    float: left;
}
#column2 {
    background-color: lime;
    margin-left: 200px;
    overflow: hidden;
    min-height: 200px;
}
</style>
<div id="column-wrap">
    <div id="column1">Column 1</div>
    <div id="column2">Column 2</div>
</div>

除了Safari（5.1.7）之外，它适用于所有浏览器，如果我在第二列中使用overflow: hidden;属性，Safari会在右侧显示一个大的空边距。

为什么呢？我该如何解决？

Answer 1

我不知道你是否想要这样的东西，但试试下面的例子 - ＆gt;

DEMO

从margin-left:200px

中删除#column2

#column2 {
    background-color: lime;
    overflow: hidden;
    min-height: 200px;
    }

您的#column2将自动向左浮动，因为您尚未清除其float属性，因此无需margin-left

在Safari 5.1.7（Windows）中测试并使用。

Safari溢出：隐藏，右边距错误

1 个答案: