使用CSS和HTML绘制平铺布局

不依赖表格，完成如下这样的瓦片布局将是一个很好的解决方案：自动适应用户的屏幕尺寸。也就是说，整个屏幕应该由瓷砖填充，而不管分辨率和高度如何。

我感谢任何想法

〜罗伯特

解决方法

这是一个工作示例：
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;
}

原文地址：https://www.jb51.cc/css/218367.html