CSS 2頁面浮動不起作用

我已閱讀了很多關於CSS Float的文章，但仍然無法讓我的簡單示例工作。我想使用這個網站讓我的網頁上2列：CSS 2頁面浮動不起作用

<div id="mainContent" style="clear: both;"> 
    <div id="categoryColumn" > 
    <h1 > 
     Recipe Categories 
     </h1> 
     <ul> 
     <li>cat1</li> 
     <li>cat2</li> 
     <li>cat3</li> 
     </ul> 
    </div> 

    <div id="menuColumn"> 
    <h1> 
     Weekly Menus 
    </h1> 
     <ul> 
     <li>menu1</li> 
     <li>menu2</li> 
     <li>menu3</li> 
     <li>menu4</li> 
     <li>menu5</li> 
     </ul> 
    </div> 
</div>

這個CSS

#categoryColumn 
{ 
    background-color: yellow; 
    width: 500px; 
    float: left; 
} 

#menuColumn 
{ 
    background-color: red; 
    width: 500px; 

}

我知道的div被識別，因爲顏色是正確的，但是這兩個名單出現在彼此的頂部，而不是並排。我想頂部列（categoryColumn）在左側，最下面的一個在右側。我使用浮球錯了嗎？

來源

2012-04-30 Brad Irby

你嘗試使用％，而不是固定的寬度？如寬度：50％ –

您是否擁有固定的頁面寬度，或者mainContent的寬度是否小於1000px，以便同時容納categoryColumn和menuColumn？ – g13n

哪種類型需要這種對齊的任何示例？給我 –

float也需要放在menuColumn上。

來源

2012-04-30 18:47:44 albert

就是這樣！我正在將類別列左移（已經離開），並且根本不會浮動菜單列。我將菜單欄右移，然後固定它。謝謝。 –

不一定 –

加浮動：左#menuColumn - 看http://jsfiddle.net/UjLeK/

來源

2012-04-30 18:49:28 Andiih

嘿布拉德·厄比需要浮動兩個DIV對方，只是檢查一下... http://jsfiddle.net/mnuVB/

來源

2012-04-30 18:52:32 Chandrakant

CSS 2頁面浮動不起作用

回答

相關問題