对于带有正方形，行和列的网格布局，遇到CSS问题

Question

我试图创建我认为是div的简单布局，但是css证明比我最初想的要复杂一点。每个DIV都需要独立（因此我不能使用div来包含SQUARES和ROW，而另一个div用于保存COLUMN）以便于响应。

我正在努力实现这一目标......

这样的响应式版本很窄......

但我似乎无法将ROW容器放在SQUARE容器下面。这是我到目前为止的代码和fiddle。

HTML

<div id="wrapper">

<div id="content">

    <div id="item" class="square">

        text

    </div>

</div>

<div id="content">

    <div id="item" class="square">

        text

    </div>

</div>

<div id="content">

    <div id="item" class="horiz">

        text

    </div>

</div>


<div id="content">

    <div id="item" class="vert">

        text

    </div>

</div>


<div id="content">

    <div id="item" class="vert">

        text

    </div>

</div>

CSS

#wrapper{
    max-width: 95%;
    height: auto;
    margin: 0 auto;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    background: #00F;
}

#content{
    margin-top: 25px;
    background: #F00;
    display: inline;
}

#item{
    background: #F0F;
    text-align: center;
}

.square {
    width:100px;
    height:100px;    
    margin:1%;
    float:left;
}


.horiz {
    width:200px;
    height:100px;    
    margin:1%;
    float:left;
    display: block;
}

.vert {
    width:100px;
    height:200px;   
    margin:1%;
    float:left;

}

Answer 1

这是创建类似于您需要的响应式网格的一种方法。

我将从以下HTML开始：

<div id="wrapper">
    <div class="item square s1">text square 1</div>
    <div class="item square s2">text square 2</div>
    <div class="item horiz">text horiz</div>
    <div class="item vert v1">text vert v1</div>
    <div class="item vert v2">text vert v2</div>
</div>

并查看以下CSS：

#wrapper {
    width: 90vw;
    height: 45vw;
    margin: 0 auto;
    background: #00F;
    position: relative;
}
.item {
    text-align: center;
    background-color: pink;
}
.square {
    width: 23.75%;
    height: 47.5%;
    position: absolute;
    top: 2%;
}
.s1 {
    left: 1%;
}
.s2 {
    left: 25.75%;
}
.horiz {
    width: 48.5%;
    height: 46.5%;
    position: absolute;
    top: 51.5%;
    left: 1%;
}
.vert {
    width: 23.75%;
    height: 96.0%;
    position: absolute;
    top: 2%;
}
.v1 {
    left: 50.5%;
}
.v2 {
    left: 75.25%;
    background-color: yellow;
}

诀窍是使用视口百分比长度设置包含块的单位 （大众单位，http://www.w3.org/TR/css3-values/#viewport-relative-lengths）。

我将宽度设置为视口宽度的90％，高度设置为视口宽度的一半 这样你得到一个宽高比为2：1的块。

然后，您可以使用绝对定位将各种元素放置在网格中 使用宽度，高度和边距的百分比值。

结果是响应式的，但内容可能会溢出，因为所有子块都有 固定尺寸（在您的移动应用程序中可能没问题。）

您可以使用类似的方法进行窄屏幕布局，使用1：2宽度：高度 比率而不是2：1。

请参阅演示：http://jsfiddle.net/audetwebdesign/nwgcLcc0/

注意：在两个正方形+水平元素集周围添加一个包装器，然后在两个垂直元素周围添加第二个包装器会更容易。