动态平铺显示

Question

我是一个CSS新手，我希望这里的人能有耐心指出我的方法的错误。

基本上，我正在创建一个移动web平台，我正在设计一个概念“登录页面”，它将由四个大小相等的矩形(在某些分辨率上是正方形)磁贴(灵感来自这里：http://tinyurl.com/beartss)组成。

显然，由于这个应用程序是面向移动的，我一直在避免固定的宽度和高度，但无法得到与我链接的图像中看到的相同的布局。我的HTML布局如下：

        <div class="page-container">
            <div class="tile-1"></div>
            <div class="tile-2"></div>
            <div class="tile-3"></div>
            <div class="tile-4"></div>
        </div>

我现在使用的CSS是...

html, body, .container 
{
    height: 100%;
    min-height: 100%;
}

.page-container 
{
    margin: 0 auto;
    border: 1px solid black;
    height: 99%;
    min-height: 99%;
    width: 99%;
}

.tile-1 
{
    border: 1px solid black;
    height: 48%;
    width: 48%;
}

.tile-2 
{
    border: 1px solid black;
    height: 48%;
    width: 48%;
}

.tile-3 
{
    border: 1px solid black;
    height: 48%;
    width: 48%;
}

.tile-4 
{
    border: 1px solid black;
    height: 48%;
    width: 48%;
}

这离我想要实现的目标还差得很远，有传言说基于高度百分比的高度从来都不是一个好主意，不管怎样，上面的CSS给了我这个：http://i.imgur.com/nXbcHze.png。

任何帮助都将不胜感激，我相信我只是错过了一些关于高度的东西。

Answer 1

通常，块级元素不会与另一个块级元素出现在同一行上。因此，您需要将它们浮动或将其显示更改为类似inline-block的内容。

http://jsfiddle.net/kyyjg/

你会发现，由于盒子模型的工作方式，在你的边框上混合px和你的尺寸的百分比会导致你的元素不占用正确的空间量。您可能会发现添加box-sizing: border-box很有帮助。

如果你对另一种方法感兴趣，下面是如何使用flexbox来实现的：

http://jsfiddle.net/LJMdx/4/

html, body {
    height: 100%;
}

.page-container {
    min-height: 100%;
    background: red;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 1%;
}

.page-container div {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-flex: 1 1 48%;
    flex: 1 1 48%;
    margin: 1%; /* optional */
    border: 1px solid;
}

如果您不想要分块之间的间隙，请丢弃1%的边距和填充：http://jsfiddle.net/LJMdx/3/

http://caniuse.com/#feat=flexbox

Answer 2

试试float:left。Demo ->这就是你要找的解决方案吗？

在每个磁贴上添加了一个min-width，以便模板在任何分辨率上都是相同的。