不同div 2列布局

這與簡單2列布局不同。不同div 2列布局

我需要這個網站：

<div class="menu"> 
    <div class="right">One</div> 
    <div>Three</div> 
    <div>Four</div> 
    <div class="right">Two</div> 
    <div class="right">Two</div> 
    <div>Four</div> 
    <div class="right">Two</div> 
</div>

的DIV類菜單有一個靜態的寬度，我需要的div裏面它在右欄中去，和正常的div留下來，因爲它們。

這裏是我到目前爲止的CSS，但我似乎無法推測出來呢：

div.menu { 
    width: 550px; 
} 
div.menu div { 
    float: left; 
    width: 200px; 
} 
div.menu div.right { 
    float: right; 
}

的div裏面有隨機的順序，所以我不能將它們用一個div和浮空。

這裏是上面的HTML代碼應該是什麼樣子的草圖：

alt text http://img102.imageshack.us/img102/4494/flytc3.jpg

來源

2009-01-15 Luca Matteis

你真的堅持與HTML？如果是的話，我認爲你唯一的選擇是做一些非常難看的事情。你可以用JavaScript修改結構還是禁用？ – Prestaul 2009-01-15 02:19:47

我正在尋找一個純粹的CSS解決方案，是的，我堅持使用該HTML。 – 2009-01-15 03:03:16

嘗試：

div.menu div { 
    float: left; 
    clear: left; 
} 
div.menu div.right { 
    float: right; 
    clear: right; 
}

來源

2009-01-15 03:14:14 Prestaul

我似乎無法找出你想達到的目標。你可以在MS Paint中創建一些基本的草圖或其他東西，這樣我們可以幫助你嗎？

編輯：也許我不明白這裏的一些內容，但這正是它在我的Chrome窗口中的樣子（除了填充）。

來源

2009-01-15 02:19:53

不同div 2列布局

回答

相關問題