html - 使用 CSS 和 HTML 的平铺布局

Question

在不依赖表格的情况下，什么是完成这样的磁贴布局的好解决方案:自动适应用户的屏幕尺寸。也就是说，无论分辨率的大小和高度如何，整个屏幕都应该由图 block 填充。

我很感激任何想法。

~罗伯特

Answer 1

这是一个工作示例: jsfiddle

HTML:

<div class="container">
<div class="first">first</div><div class="third">third</div>
<div class="second">second</div><div class="fourth">fourth</div><div class="last">last</div>
</div>​

CSS:

html, body, .container
{
    height: 100%; 
    min-height: 100%;
}

.first {
    float: left;
    width: 20%;
    height: 30%;
    background-color: red;
}

.second{
    float: left;
    width: 20%;
    height: 70%;
    background-color: green;
}


.third{
    float: right;
    width: 80%;
    height: 80%;
    background-color: blue;
}

.fourth {
    float: right;
    width: 40%;
    height: 20%;
    background-color: #DDDDDD;
}

.last{
    float: right;
    width: 40%;
    height: 20%;
    background-color: yellow;
}