谷歌波CSS佈局

Question

一個如何可以創建一個CSS佈局對谷歌波根據窗口大小自動調整，而不需要（從其中正在使用滾動條的每個頁面上的特定元素分開）滾動所看到與每個DIV定位在在網站上看到類似的時尚？我真的很喜歡這個界面，並一直試圖在Dreamweaver上創建它（網絡編程是一種愛好），而不使用表格作爲練習。

我正在學習從頭CSS。

我已經包含用於參考的圖像。

非常感謝！

Answer 1

我對如何，你可以嘗試啓動實現那種佈局的律例如：http://jsfiddle.net/steweb/A77gy/

與寬度的工作是相當簡單，因爲你設置浮動欄，％寬度/利潤率和OPLA」你流體寬度佈局。

具有高度的工作是非常辛苦，我想，因爲如果你想有一個「流體」的行爲也影響高度，而不採用ABS定位（適合設置％的高度，但你失去了％寬度強大），你也應該對JS做些什麼（即使我會避免做一些關於JS的純佈局的東西） - 我爲這個複雜的句子道歉：D。

通過處理這種類型的佈局「問題」，你還會注意到，一些瀏覽器（IE ...？...）有時表現在一個奇怪的方式......所以，你需要一些各種招數，使一切都在每一個瀏覽器的工作（這是國際海事組織的主要挑戰）

標記：

<div id="header"> 
    <a href="#">link 1</a> 
    &nbsp;|&nbsp; 
    <a href="#">link 2</a> 
    &nbsp;|&nbsp; 
    <a href="#">link 3</a> 
    &nbsp;|&nbsp; 
    <a href="#">link 4</a> 
    <!-- or a <ul> --> 
</div> 
<div class="column" id="first-column"> 
    <div class="window" id="window-1"></div> 
    <div class="window" id="window-2"></div> 
</div> 
<div class="column" id="second-column"> 
    <div class="window" id="window-3"></div> 
</div> 
<div class="column" id="third-column"> 
    <div class="window" id="window-4"></div> 
</div> 

CSS：

body, html{ 
    height:100%; 
} 
#header{ 
    width:100%; 
    height:30px; 
    background:black; 
} 
.column{ 
    float:left; 
    margin:1% 
} 
#first-column{ 
    width:10%; 
} 
#second-column{ 
    width:30%; 
} 
#third-column{ 
    width:50%; 
} 
.window{ 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    border:1px solid #CECECE; 
    width:100%; 
} 
#window-1{ 
    height:100px; 
} 
#window-2{ 
    margin-top:10px; 
    height:200px; 
} 
#window-3{ 
    height:310px; 
} 
#window-4{ 
    height:310px; 
} 

Answer 2

列可以使用CSS浮動來實現。只需創建三個div標籤並應用float: left併爲每個標籤分配一個寬度。

100％的高度可以通過CSS來實現，但在波動的情況下，JavaScript的可能正在使用。特定的邏輯取決於網站的設計，因爲您需要考慮頁面上的其他元素，例如標題欄。

如果你有興趣，你可以使用Firebug /開發者控制檯檢查谷歌Wave的基本佈局是如何設置標籤明智的。一個包裝div，3列div，以及面板每列中的一個div或兩個div。