html - 在使用 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;
}

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

我将宽度设置为视口(viewport)宽度的 90%，将高度设置为它的一半 值，所以你得到一个宽高比为 2:1 的 block 。

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

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

您可以对窄屏布局使用类似的方法，使用 1:2 的宽度:高度 比例而不是 2:1。

参见演示:http://jsfiddle.net/audetwebdesign/nwgcLcc0/

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