【问题标题】：Tile layout with CSS and HTML使用 CSS 和 HTML 的平铺布局
【发布时间】：2012-07-08 14:21:19
【问题描述】：

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

我很欣赏任何想法。

~罗伯特

【问题讨论】：

我的例子在这里：shaquin.tk/experiments/tile.html。 @MajoB 显然是和我同时写他们的例子。
谢谢沙昆。到目前为止，我尝试的所有内容都与表格布局有关，因为我在安排浮动 div 时遇到了问题。我没有注意浮动右必须在浮动左之前。

标签： html css layout

【解决方案1】：

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

【讨论】：

可能是最简单和最好的全方位解决方案。但是，当屏幕空间较小时，它的播放效果并不好，因此请考虑为小屏幕使用后备。

【解决方案2】：

提示：

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

你比我早了 9 分钟！ :-)
我还要感谢您的解决方案。为什么不使用绝对定位，例如上面例子中的 Shaquin？
@orschiro 因为那不是必需的:)
@orchiro - 你要么必须使用float 要么使用绝对定位。绝对定位更灵活，例如您可以在z-index 的帮助下使某些元素重叠。

【解决方案4】：

免责声明

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

为了将来的参考，我会研究布局类的 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

【讨论】：