1

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

一个需要向左浮动，另一个需要向右浮动。或者更确切地说，一个人需要拥抱父母的左侧和另一个人的右侧（以防有人有非浮动解决方案）。但是当它们重叠时（即，当浏览器缩小到使浮动的左侧 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元标记最终将被使用，但目前我只希望它在桌面设置中正确响应。

祝你好运...

4

1 回答 1

0

这是你的意思吗？

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

#header{

overflow:auto;

}

#header-title{

    float: left;
}

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

于 2013-07-23T09:01:05.530 回答