使用响应式布局浮动 2 个元素答案

【问题标题】：Floating 2 elements with a responsive layout使用响应式布局浮动 2 个元素
【发布时间】：2012-11-22 00:13:35
【问题描述】：

我的页脚中有 2 个 div，我希望 div 1 位于屏幕左侧，而 div 2 位于屏幕右侧。

div 1 的显式宽度为 300px，而 div 2 仅包含一个向左浮动的元素列表。

当页面缩小时，我希望 div 2 下降到 div 1 下面。最好的方法是什么？我是否都向左浮动？我是否将 div 1 放在代码中的 div 2 上方？我是否给他们两个明确的宽度？

【问题讨论】：

【解决方案1】：

只需将左侧 div 浮动到左侧，将右侧 div 浮动到右侧，如果包含的 div 缩小太多，它应该将它们堆叠起来。

HTML -

<div id="parent">
<div id="left">Left</div>
<div id="right">Right</div>
</div>

CSS -

#parent {
    width: 25px;
}

#left {
    float: left;
}

#right {
    float: right;
}

【讨论】：

【解决方案2】：

你需要浮动两个容器元素并给它们一个固定的宽度。

【讨论】：