使用CSS的流體寬度佈局

Question

我正在嘗試放置一個頁面，該頁面具有橫跨頁面的標題。

標題包含菜單項，看起來是這樣的（ASCII下面渲染）

<------ Fixed Width ----------> <----------- Variable Width (Depends on Screen Width) --> 

----------------------------------------------------------------------------------------- 
    LOGO HERE (Fixed Width)  | Menu One | Menu Two | menu Three | Menu Four  
           |    |   |   |     
----------------------------------------------------------------------------------------- 

我在HTML設計了這個是這樣的：

<div id="topMenu"> 
    <div id="topMenuLogo"><!-- flash logo stuff here --></div> 
    <div id="topMenuContainer"> 
     <div id="topMenuTopBar" class="right-align"> 
      <div class="useroption floatleft">Action 1</div> 
      <div class="useroption floatleft">Action 2</div> 
      <div class="spacer">&nbsp;</div> 
     </div> 
     <div id ="topMenuNavBar"> 
      <div id=topmenuMenuContainer"> 
       <ul> 
       <li>Menu One</li> 
       <li><!-- Other menus follow below ...... --></li> 
       </ul> 
      </div> 
     </div> 
     <div class="spacer">&nbsp;</div> 
    </div> 
    <div class="spacer">&nbsp;</div>   
</div> 

在CSS類「隔離」相匹配模式{height：1px; clear：both;}

我希望能夠編寫上述內容，以便頁面動態擴展以適合屏幕，而不管分辨率如何。徽標具有固定寬度，因此不會更改，但我希望topMenuContainer潛水元素根據屏幕大小動態調整其寬度。基本上，該元素將包含以下內容：

放大或縮小取決於 的屏幕分辨率是正確的topMenuContainer元素

1. 一個topMenuNavBar內浮動

2. 一個topMenuTopBar

3. 一個topMenuContainer元素在topMenuContainer元素內左上浮動

如果有人出現，我會很感激ld以我描述的方式顯示了構建上述HTML代碼段所需的CSS。

Answer 1

這應該是你＃爲總體佈局問題，像這樣的1個資源：

http://layouts.ironmyers.com/

你會發現你可能想要他的網站上的任何CSS佈局。如果你不知道CSS的是，你可以在W3School檢查出的教程：

http://www.w3schools.com/css/