使用CSS和HTML进行平铺布局

Question

如果不依赖于表,那么完成tile布局的好方法是什么: 自动适应用户的屏幕尺寸.也就是说,无论分辨率的大小和高度如何,整个屏幕都应该由平铺填充.

我很欣赏任何想法.

〜罗伯特

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

​