Question

我有点像CSS菜鸟，我希望有人能耐心指出我的方式错误。

基本上，我正在创建一个移动网络平台，我正在设计一个概念“登陆页面”，它将由四个大小相等的矩形（某些分辨率上的正方形）瓷砖组成（灵感来自这里：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给了我这个：{{3} }

任何帮助都会受到赞赏，我确信我只是错过了高度的东西。

Answer 1

试试float:left。 Demo - ＆gt;那是你寻找的解决方案吗？

在每个图块上添加min-width，以便模板在任何分辨率上都相同。

Answer 2

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

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

动态平铺显示

2 个答案: