首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >使用CSS和HTML的平铺布局

使用CSS和HTML的平铺布局
EN

Stack Overflow用户
提问于 2012-07-09 15:34:33
回答 2查看 88K关注 0票数 21

在不依赖于表的情况下,什么是实现像这样的平铺布局的好解决方案:

它会自动适应用户的屏幕尺寸。也就是说,无论分辨率的大小和高度如何,整个屏幕都应该由平铺填充。

我很欣赏你的想法。

~罗伯特

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-07-09 15:58:21

下面是一个有效的示例: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;
}

票数 18
EN

Stack Overflow用户

发布于 2012-07-09 15:44:33

我会使用一些使用absolute positionningdiv。并使用%单位为每个平铺指定宽度/高度/顶部/左侧。

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/11390759

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档