谷歌波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。