使用CSS和HTML绘制平铺布局

前端之家收集整理的这篇文章主要介绍了使用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;
}

猜你在找的CSS相关文章