0
我正在嘗試放置一個頁面,該頁面具有橫跨頁面的標題。使用CSS的流體寬度佈局
標題包含菜單項,看起來是這樣的(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"> </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"> </div>
</div>
<div class="spacer"> </div>
</div>
在CSS類「隔離」相匹配模式{height:1px; clear:both;}
我希望能夠編寫上述內容,以便頁面動態擴展以適合屏幕,而不管分辨率如何。徽標具有固定寬度,因此不會更改,但我希望topMenuContainer潛水元素根據屏幕大小動態調整其寬度。基本上,該元素將包含以下內容:
-
放大或縮小取決於 的屏幕分辨率是正確的topMenuContainer元素
一個topMenuNavBar內浮動
一個topMenuTopBar
- 一個topMenuContainer元素在topMenuContainer元素內左上浮動
如果有人出現,我會很感激ld以我描述的方式顯示了構建上述HTML代碼段所需的CSS。
有用的鏈接,但它仍然dosent回答我的問題 - 這是如何與固定創建一個元素(容器)寬度和可變寬度部分。 – 2009-11-10 17:11:18
爲了進一步闡明,我已經可以創建這樣的頁面 - 因爲它們非常簡單。我想要做的比該網站上的任何示例(AFAICT)都要複雜。 如果我採用網站上的其中一個示例,我仍然會遇到將我的標頭或標題部分放入頁面的問題,因此問題仍未解決。 – 2009-11-10 17:14:04
如果我理解你的問題,你想要一個容器,調整頁面大小,但有一個最小寬度,正確的?即容器可以擴展到任何寬度,但必須至少與桅杆頭一樣寬。在這種情況下,您只需使用min-width css屬性來指定最小寬度。 – 2009-11-10 21:28:18