22

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

我很欣赏任何想法。

〜罗伯特

4

4 回答 4

18

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

​</p>

于 2012-07-09T07:58:21.340 回答
3

我会选择一些div使用绝对定位的。并使用%单位为每个图块指定宽度/高度/顶部/左侧。

于 2012-07-09T07:44:32.740 回答
1

暗示：

  • 使用宽度和高度为 100% 的“内容 div”
  • 在“内容 div”中使用两个 div：一个用于左列，一个用于右列。记得给那些“%”维度（也给“内容”div）
  • 请记住，浮动的右 div 必须在左浮动的 div之前

有了这三点，你应该可以自己试试了。

于 2012-07-09T07:45:36.813 回答
0

免责声明

这并不意味着您的项目需要。其他用途已经回答了这个问题。

为了将来参考，我将研究布局类的 oocss 方法。您的页面可能具有不同数量的图块等。我将以下内容用于我的项目。

平铺对象

用于创建平铺布局。

css

.tiles
{
    display: block;
}

.tiles__item
{
    display: block;

    height: auto;

    float:left;
}

.tiles--2
{
    margin-left: -4%;
}

.tiles--3
{
   margin-left: -2%;
}

.tiles--4
{
    margin-left: -2%;
}

.tiles--2 .tiles__item
{
    margin-left: 4%;

    width: 46%;
}

.tiles--3 .tiles__item
{
    margin-left: 2%;

    width: 31.3%;
}

.tiles--4 .tiles__item
{
    margin-left: 2%;

    width: 23%;
}

html

<div class="tiles tiles--2">

    <div class="tiles__item">

    </div>

    <div class="tiles__item">

    </div>

</div>

停靠对象

将内容停靠到屏幕边缘。

css

.dock 
{
    position: absolute;

    height: auto; 

    width: auto;
}

.dock--t
{
    width: 100%;

    top: 0;
}

.dock--b
{
    width: 100%;

    bottom: 0;
}

.dock--l
{
    height: 100%;

    left: 0;
}

.dock--r
{
    height: 100%;

    right: 0;
}

html

<div class="dock dock--t">

    The content will be docked to the top of the screen.

</div?

其他的

我会查看 Metro UI 框架中的 Tiles 对象。他们允许高度

http://metroui.org.ua/

如果您正在寻找使用比例的良好布局系统：

https://github.com/stubbornella/oocss/wiki/Grids

于 2013-05-29T15:09:15.453 回答