0

我有点 CSS 菜鸟，我希望这里有人能耐心地指出我的方法的错误。

基本上，我正在创建一个移动网络平台，我正在设计一个概念“登陆页面”，它将由四个相同大小的矩形（在某些分辨率上为正方形）瓷砖组成（灵感来自这里：http ://tinyurl.com/贝茨）。

显然，由于这个应用程序是面向移动设备的，我一直在避免固定的宽度和高度，但不能完全得到与我链接的图像中看到的相同的布局。我的 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

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

4

2 回答 2

1

试试float:left。演示-> 是您正在寻找的解决方案吗？

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

于 2013-01-19T21:16:40.627 回答
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

于 2013-01-19T21:28:23.267 回答