Question

Grid

嗨，我想知道如何实现如上所示的网格。也许你们有一些技巧？ :)我尝试过砌体，但我认为它不适合这种情况。

我也使用Bootstrap，但它不必是Bootstrap。也许如果我有一些关键词我可以谷歌它，但我不知道究竟要搜索什么。

Answer 1

是的，您可以使用Bootstrap执行此操作。

主要元素是一行，有2个div（例如50％，例如soo col-md-6）。右边的div将自己有2行，每行占父元素高度的50％。第二行本身将有2列，再次使用col-md-6。不要忘记每次有一个行或一个容器，你应该再次考虑12列系统！

<div class="row">
  <div class="col-md-6">
  </div>
  <div class="col-md-6">
    <div class="row half-height">
       <div class="col-md-12">
       </div>
    </div>
    <div class="row half-height>
       <div class="col-md-6">
       </div>
       <div class="col-md-6">
       </div>
    </div>
  </div>
</div>

没有多少时间做一个jsfiddle，但我认为很明显

Answer 2

你会看到类似的东西（注意：这只是众多可用解决方案中的一种

Fiddle

你所做的是使用bootstraps网格系统相应地创建你的形状，你设置左框（大框）的高度加倍小框的高度

<div class="container"> 
    <div class="row">
        <div class="col-md-6" style="background-color:green;height:600px;">
        </div>
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-12" style="background-color:blue;height:300px">          
                </div>
            </div>
            <div class="row">
                <div class="col-md-6"style="background-color:yellow;height:300px"></div>
                <div class="col-md-6"style="background-color:red;height:300px"></div>
            </div>
        </div>
    </div>
</div>

正如你在这段代码中看到的那样，我给较小的voxes一个高度等于大盒子高度的一半，颜色只是用于视觉表示而不起任何作用，使用col-md-6你可以适合一行中有两个columns，这是我们在您的情况下所需要的，*Note, bootstrap has 12 columns*通过使用此我们可以安全地假设在左侧框中我们需要在第一个嵌套中有一个12 columns wide的div row（因为我们有两行较小的框，我们使用嵌套行）和两个框6 columns wide在第二个嵌套行中。

在你的情况下，内联样式属性将被移动到你的style.css文件

希望这有帮助！

Answer 3

使用嵌套的flexbox为您创建的演示可以轻松完成此操作。

调整height的{{1}}和width以满足您的需求。享受！

wrapper

* {
  box-sizing: border-box;
}
.wrapper {
  display: flex;
  height: 250px;
}
div {
  background: rgb(0, 140, 88);
}

.wrapper > div:first-child {
  width: 50%;
}
.wrapper > div:last-child {
  display: flex;
  flex-direction: column;
  width: 50%;
  height: 100%;
}

.wrapper > div:last-child > div:first-child {
  width: 100%;
  height: 50%;
  background: #2ba982;
}
.wrapper > div:last-child > div:last-child {
  height: 50%;
  display: flex;
}

.wrapper > div:last-child > div:last-child > div {
  width: 50%;
  height: 100%;
}
.wrapper > div:last-child > div:last-child > div:first-child {
  background: #76c6ac;
}
.wrapper > div:last-child > div:last-child > div:last-child {
  background: #bbe2d5;
}

我怎样才能实现这个CSS布局/网格

3 个答案: