使用响应式布局浮动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

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