Question

我正在尝试使用已定义的模式创建响应式网格，如下所示： grid image

现在我在这里工作了一部分： grid demo

但是我不能把所有的列放在正确的位置，右边的大盒子左边没有2个盒子。

这是容器的代码：

<div class="container">

    <div class="box">
        <p>box1 BIG</p>
    </div>

    <div class="box">
        <p>box2</p>
    </div>

    <div class="box">
        <p>box3</p>
    </div>

    <div class="box">
        <p>box4</p>
    </div>

    <div class="box">
        <p>box5</p>
    </div>

    <div class="box">
        <p>box6 BIG</p>
    </div>

    <div class="box">
        <p>box1 BIG</p>
    </div>

    <div class="box">
        <p>box2</p>
    </div>

    <div class="box">
        <p>box3</p>
    </div>

    <div class="box">
        <p>box4</p>
    </div>

    <div class="box">
        <p>box5</p>
    </div>

    <div class="box">
        <p>box6 BIG</p>
    </div>

</div>

这是css：

.container {
    max-width: 1000px;
    margin: 0 auto;
    background-color: #5B83AD;
}
.box {
    background-color: #5B83AD;
    width: 50%;
    float: left;
    height: 200px;
}
.box:nth-child(6n+1){
    background-color: #444444;
    height: 400px;
}
.box:nth-child(6n){
    background-color: #992277;
    height: 400px;
}

@media screen and (max-width: 620px) {
    .box {
        clear: both;
        width: 100%;
    }
}
@media screen and (min-width: 621px) {
    .box {
        clear: none;
        width: 50%;
    }
}

我希望盒子始终保持相同的布局： 1大 - 2半高 2半高 - 1大 ...

我也需要它在IE8上工作

有没有办法实现这种布局（它必须是响应，如果我删除一个框，布局必须重新适应）？

Answer 1

他们出了故障，但也许你会接受它我不确定。方框4是大而不是6，这使它有点奇怪，但设计仍然遵循模式。

很抱歉，如果这不是您想要的。

http://jsfiddle.net/UN2DH/3/

唯一的主要变化来自：nth-child（6n）到nth-child（6n + 4）以及添加到该规则的浮动。

.box:nth-child(6n+4){
    background-color: #992277;
    height: 400px;
    float: right;
}

HTML

<div class="container">

    <div class="box">
        <p>box1 BIG</p>
    </div>

    <div class="box">
        <p>box2</p>
    </div>

    <div class="box">
        <p>box3</p>
    </div>

    <div class="box">
        <p>box4 BIG</p>
    </div>

    <div class="box">
        <p>box5</p>
    </div>

    <div class="box">
        <p>box6</p>
    </div>

    <div class="box">
        <p>box1 BIG</p>
    </div>

    <div class="box">
        <p>box2</p>
    </div>

    <div class="box">
        <p>box3</p>
    </div>

    <div class="box">
        <p>box4 BIG</p>
    </div>

    <div class="box">
        <p>box5</p>
    </div>

    <div class="box">
        <p>box6</p>
    </div>

</div>

CSS

.container {
    max-width: 1000px;
    margin: 0 auto;
    background-color: #5B83AD;
}
.box {
    background-color: #5B83AD;
    width: 50%;
    float: left;
    height: 200px;
}
.box:nth-child(6n+1){
    background-color: #444444;
    height: 400px;
}
.box:nth-child(6n+4){
    background-color: #992277;
    height: 400px;
    float: right;
}

@media screen and (max-width: 620px) {
    .box {
        clear: both;
        width: 100%;
    }
}
@media screen and (min-width: 621px) {
    .box {
        clear: none;
        width: 50%;
    }
}

编辑：

我忘了你真的不需要float:left规则上的.box:nth-child(6n+5), .box:nth-child(6n+6)所以我将其删除了。（如果您使用该代码，那么只需要抬头。这不是必要的，因为.box规则已经有float: left）我也更新了上面的jsfiddle。以下是旧的JSfiddle以前的CSS，以及上面的CSS，有这个规则。

.box:nth-child(6n+5), .box:nth-child(6n+6){
    float: left;
}

编辑：

好的，所以我只需要一点乐趣。 :)

我将以下内容添加到new JSFiddle。使它看起来像你的照片。我不确定你会有多少行文字，但垂直居中只有在它是一行文字的情况下才有效，所以请记住这一点。如果你想让它居中，否则你将不得不使用其他方法like this，如果你知道你想要居中的div或图像的高度和宽度是great method工作。如果您正在使用“优秀方法”中的代码，请确保您的父div为position: relative.，否则这会将其置于整个浏览器窗口或定位为fixed的最近元素中，absolute或relative。（更多关于定位here。）

我在样式表的底部添加了大部分样式，只是为了将旧版本与新版本分开，以便您可以分辨出不同之处，但首先我将向您展示我添加到现有代码中的样式。我更改了.box:nth-child(6n+1)的两种背景颜色，我添加了background-color: #676767;，而对于.box:nth-child(6n+4)，我添加了background-color: #CDCDCD;。

以下是我在样式表底部所做的更改。（如果你决定使用它，你可以将样式规则合并在一起。）

.box {
    text-align: center;
    box-sizing: border-box;
    line-height: 200px;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    color: #fff;
}

.box:nth-child(3n+1) {
    line-height: 400px;
}

.box p {
    margin: 0;
}

.box:nth-child(3n+2) {
    background-color: #7ACDC8;
}
.box:nth-child(3n+3) {
    background-color: #3CB878;
}

是的，我知道现在我的回答太荒谬了......

无论如何，希望你喜欢它。 :)如果没有那也没关系。

Answer 2

也许这就是你想要的。 Demo。

.box:nth-child(1),.box:nth-child(7n){
background-color: red;
height:200px;
}

.box:nth-child(2n){
background-color: green;
height:100px;
}

.box:nth-child(3n){
background-color: yellow;
height:100px;
}

.box:nth-child(5),.box:nth-child(11){
background-color:grey;
height:200px;
float:right;
}

你只需要使用css3：nth-child（）选择器。

响应式CSS网格与模式

2 个答案:

HTML

CSS

编辑：

编辑：