css - 使用 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 类“spacer”与模式{height:1px;clear:both;}匹配的地方

我希望能够编写上面的内容，以便无论分辨率如何，页面都可以动态扩展以适应屏幕。 Logo 具有固定宽度，因此不会改变，但我希望 topMenuContainer dive 元素根据屏幕大小动态调整其宽度。基本上，该元素将包含以下内容:

1. 扩展或收缩的 topMenuContainer 元素取决于屏幕分辨率

2. 在 topMenuContainer 元素内 float 的 topMenuTopBar

3. 在 topMenuContainer 元素内向左浮动的 topMenuNavBar

如果有人能按照我描述的方式展示构建上述 HTML 片段所需的 CSS，我将不胜感激。

Answer 1

这应该是您解决此类一般布局问题的第一资源:

http://layouts.ironmyers.com/

您可以在他的网站上找到您可能想要的任何 CSS 布局。如果您还不了解 CSS，可以查看 w3schools 上的教程:

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