使用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/