CSS位置水平的div在反序

我有一個文件，看起來像CSS位置水平的div在反序

<div id="content"> 
    <p> blah </p> 
</div> 

<div id="menu"> 
    <p> blah2 </p> 
</div> 

<div id="footer"> 
    <p> Copyright </p> 
</div>

內容DIV是菜單股利後，但有可能有佈局顯示，像這樣：

------------------- 
| Menu | Content | 
|  |   | 
|  |   | 
------------------- 
| Footer   | 
-------------------

你如何交換他們的訂單？我寧願不使用絕對定位。

來源

2010-01-01 Verhogen

嘗試float:right;在他們每個人。

來源

2010-01-01 22:58:24

您還需要爲內容div添加固定寬度，以防止左邊框隨着內容的變化而移動。 – Joel 2010-01-01 23:01:33

或相對％也會這樣做。菜單：30％，內容：70％，頁腳：100％ – 2010-01-01 23:03:04

我會在菜單和內容上做浮動，然後在將寬度設置爲100％之後清除頁腳。

來源

2010-01-01 23:00:39

嘗試一些CSS是這樣的：

#menu { 
    float:left; 
} 
#content { 
    float:right; 
} 
#footer { 
    clear:both; 
}

來源

2010-01-01 23:01:31

出於某種原因，這在菜單和歌劇內容之間留下了一個小的不明確的差距。可能是一個錯誤，但仍然。 – 2010-01-01 23:22:15

你可以改變的HTML代碼，如果可能的話，我會做：

<div id="wrapper"> 
    <div id="menu"> 
    <p>Blah</p> 
    </div> 
    <div id="content"> 
    <p>Blah</p> 
    </div> 
</div> 
<div id="footer"> 
    <p>Blah</p> 
</div>

和風格它：

#wrapper { overflow: hidden; } 
#menu { float: left; width: 40%; /* Any size u want */ } 
#content { float: left; width: 60%; /* Any size u want */ }

我想你不可能，所以你問，然後我會像別人說的那樣做：

#menu { float:right; } 
#content { float: left; } 
#footer { clear: both; }

來源

2010-01-01 23:28:48 Martin

float的一個問題是：right/float：left解決方案是您必須照顧的元素和額外的容器div之間的差距。

另一種方式來做到這一點是：

#content, #menu{ 
    position: relative; 
    float: left; 
} 
#menu { right: 500px; } 
#content { left: 100px; } 
#footer { clear: both; }

哪裏500px的是內容的寬度，100px的是菜單的寬度。該解決方案需要相對定位和固定寬度的div。

來源

2010-01-02 00:30:24

你的情況基本上是相對定位的，相對於它們通常所在的位置移動元素。「右」移動元素，使其最右邊的像素數量位於其左邊緣通常所在的左側。「左」反之亦然，仍然從左邊通常會出現。 – 2010-01-02 00:38:12

CSS位置水平的div在反序

回答

相關問題