2

次のように、デスクトップで 2 列のレイアウトから移行しようとしています。

ここに画像の説明を入力

次のように、モバイルで 1 列のレイアウトにします。

ここに画像の説明を入力

コンテナ #5をデスクトップの正しい位置に配置するのに問題があります。私のマークアップ（簡潔にするために変更）は次のようになります（これは何にでも変更できます）：

<div id="container-1></div>
<div id="container-2></div>
<div id="container-3></div>
<div id="container-4></div>
<div id="container-5></div>

デスクトップ: #1と#5は左にフロートし、残りは右にフロートします。ただし、これにより、 #5 が#1のすぐ下ではなく #4 のすぐ隣に配置されます (#5 は #4 の上に配置されます) 。うまくいくはずだと思った。ここで何か不足していますか？

PS: すべてのコンテナの高さは流動的です

4

1 に答える 1

0

真ん中の3を予備の容器に入れて包んでみてください。

<div id="container">
    <div id="container-1">content content content content content content </div>
    <div id="containerwrapper">
        <div id="container-2">content content content content content content </div>
        <div id="container-3">content content content content content content content content content content content content </div>
        <div id="container-4">content content content content content content content content content content content content </div>
    </div>
    <div id="container-5">content content content content content content </div>
</div>​

そしてCSS：

#container { background: none; float: left; width: 340px; }
div { margin: 10px; margin-bottom: 0; background: #0f0; }
#container-1 { float: left; width: 60px; }
#containerwrapper { background: none; float: right; margin: 0; }
#container-2 { width: 240px; }
#container-3 { width: 240px; }
#container-4 { width: 240px; }
#container-5 { float: left; width: 60px; }​

ここで見ることができます：http://jsfiddle.net/GcYuh/

于 2013-01-03T01:26:58.213 に答える