Question

我正在尝试重新创建它：

使用HTML / CSS，以便每个彩色块都是一个div，我可以在其中添加内容。它需要响应，但是我认为我可以使用Media Queries来解决。

除了左下方，我设法使所有块的布局都能正常工作！我只是无法将其插入左上方方块下方的间隙中。

这是我的HTML：

<div class="container">
  <div class="box one">
    1
  </div>
  <div class="box two">
    2
  </div>
  <div class="box three">
    3
  </div>
  <div class="box four">
    4
  </div>
  <div class="box five">
    5
  </div>
  <div class="box six">
    6
  </div>
</div>

和我的CSS：

.box {
  display:inline-block;
  margin:0;
  float:left;
}

.one {
  background:#000;
  color:#fff;
  width:40%;
  height:400px;
}
.two {
  background:#ddd;
  color:#000;
  width:60%;
  height:200px;
}
.three {
  background:#efefef;
  color:#000;
  width:30%;
  height:400px;
}
.four {
  background:#222;
  color:#fff;
  width:30%;
  height:200px;
}
.five {
  background:#754;
  color:#fff;
  width:30%;
  height:200px;
}
.six {
  background:#c3d;
  color:#fff;
  width:30%;
  height:200px;
}

我在Codepen中设置了

https://codepen.io/maniac123/pen/oQbgMr

有人知道如何将最后的“ 6”格插入“ 1”下吗？

Answer 1

如果您愿意使用CSS Grid。然后，我建议使用它。另外，它使代码更易于处理。

这是CSS：

.container {
    display: grid;
    grid-template-areas:
    "one two two"
    "one three four"
    "five three six";
}

.box{
  min-height: 200px;
}

.one {
    background: #000;
    color: #fff;
    grid-area: one;
}
.two {
    background: #ddd;
    color: #000;
    grid-area: two;
}
.three {
    background: #efefef;
    color: #000;
    grid-area: three;
}
.four {
    background: #222;
    color: #fff;
    grid-area: four;
}
.five {
    background: #754;
    color: #fff;
    grid-area: five;
}
.six {
    background: #c3d;
    color: #fff;
    grid-area: six;
}

这是一个codepen：https://codepen.io/anon/pen/vQLOxy

在我的示例中，我使用的是命名网格区域。如果要交换一个块位置。您可以交换它们的grid-area属性。

如果您确实选择了此选项，建议您多看一下CSS Grid，因为它使工作变得更加轻松。这是一篇文章，您可以进一步阅读：https://css-tricks.com/snippets/css/complete-guide-grid/

Answer 2

您应该使用CSS网格

我建议先调查一下。

但是这是可以做到的：

.container{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
}

.box-one{
  grid-column: 1/2;
  grid-row: 1/3;
}

列从左到右，行从上到下

这只会做第一个，其余的应该以相同的方式完成

Answer 3

尝试这种方式：

Either

Answer 4

看到块使用固定高度时，可以使用以下内容：

.six {
margin-top: -200px;
...
}

我还是建议您看看CSS网格。

响应网格宽度不同的高度列

4 个答案: