css - レスポンシブレイアウトのフローティング2要素

Question

フッター内に2つのdivがあり、div 1を画面の左側に配置し、div2を画面の右側に配置する必要があります。

Div 1の明示的な幅は300pxですが、Div2には左にフロートされた要素のリストのみが含まれています。

ページが縮小したら、div2をdiv1の下にドロップします。これを行うための最良の方法は何ですか。両方を左に浮かせますか？コード内でdiv1をdiv2の上に配置しますか？両方に明示的な幅を指定しますか？

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

両方のコンテナ要素をフロートさせ、それらに固定幅を与える必要があります。