使用CSS和HTML的平铺布局

如果不依赖于表，那么实现这样的平铺布局的好解决方案是什么：自动适应用户的屏幕大小。也就是说，无论分辨率和高度如何，整个屏幕都应该由瓷砖填充

我很欣赏你的想法

---

~Robert

我会用一些

div

。并使用

%

单位指定每个磁贴的宽度/高度/顶部/左侧。

提示：

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

有了这三点，你就可以自己尝试了。

以下是一个有效的例子：

Html:

---

​

免责声明

这并不意味着你的项目需要。这一点已被其他用途所回答

---

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

.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="tiles tiles--2">

    <div class="tiles__item">

    </div>

    <div class="tiles__item">

    </div>

</div>

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

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

</div?

html

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

    <div class="tiles__item">

    </div>

    <div class="tiles__item">

    </div>

</div>

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

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

</div?

内容将停靠在屏幕顶部。
可能是最简单、最好的解决方案。但是，当屏幕空间很小时，它就不能玩得很好，所以请考虑使用小屏幕的回退。你在9分钟内打败了我！我还要感谢你的解决方案。你为什么不使用绝对定位，比如上面例子中的Shaquin？@orschiro，因为这是不必要的：）@orschiro-你要么使用
float
要么使用绝对定位。绝对定位更灵活，例如，您可以借助
z-index
使某些元素重叠。我的示例如下：@很明显，MajoB和我同时在写他们的例子。谢谢Shaquin。到目前为止，我所做的一切都与桌子布局有关，因为我面临着安排浮动div的问题。我没有注意到右浮动必须先于左浮动。