html - float div 重叠时的行为变化

Question

我有两个 div。它们都可以包含可变大小的内容。

一个需要向左浮动，另一个需要向右浮动。或者更确切地说，一个人需要拥抱 parent 的左侧，另一个需要拥抱 parent 的右侧(以防有人有非 float 解决方案)。但是当它们重叠时(即当浏览器缩小到使 float 的左 div 与 float 的右 div 接触的大小时)我希望它们清除，或者堆叠一个在另一个之上，就好像它们一样都向左漂浮，没有足够的空间进行裂变。

这可能吗？

一些 HTML:

<div id="header">
    <div id="header-title">
        <h1>
            Title (variable length)
        </h1>
    </div>
    <div id="header-menu">
        <h2>
            Menu1 Menu2 Menu3 Menu4 Menu5 Menu6 Menu7 (variable length)
        </h2>
    </div>
</div>

一些CSS:

#header{

    overflow:auto;

}

#header-title{

    float:left;

}

#header-menu{

    float:right;

}

值得一提的是，所需的行为在某种程度上属于响应式网页设计领域，但我希望它在没有 @media 查询的情况下以这种方式表现。 viewport 元标记最终会被使用，但目前我只想让它在桌面设置中正确响应。

祝你好运......

Answer 1

这是你的意思吗？

http://jsfiddle.net/K8fnc/3/

#header{

overflow:auto;

}

#header-title{

    float: left;
}

如果你去掉 float: 就在第二个 div 上，它会起作用。