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;}

我希望能够编写上述代码，以便无论分辨率如何，页面都会动态扩展以适应屏幕。徽标具有固定的宽度，因此不会改变，但我希望topMenuContainer潜水元素根据屏幕尺寸动态调整其宽度。基本上，该元素将包含以下内容：

扩展或收缩的topMenuContainer元素取决于屏幕分辨率
在topMenuContainer元素中浮动的topMenuTopBar
在topMenuContainer元素中左侧浮动的topMenuNavBar

如果有人能够以我描述的方式显示构建上述HTML片段所需的CSS，我将非常感激。

Answer 1

对于像这样的一般布局问题，这应该是您的第一资源：

http://layouts.ironmyers.com/

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

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

使用CSS的流体宽度布局

1 个答案: