css - 使用响应式布局浮动 2 个元素

Question

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

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

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

Answer 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;
}​

看看这个 jsfiddle - http://jsfiddle.net/LaqBm/

Answer 2

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