2009-01-15 88 views
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

+0

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

+0

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

回答

3

嘗試:

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

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

編輯:也許我不明白這裏的一些內容,但這正是它在我的Chrome窗口中的樣子(除了填充)。