[分享]css做四个块左右各两个

CSS可以帮助我们实现各种各样的布局，其中之一就是将四个块分为左右各两个块。下面我们将使用CSS来实现该布局。HTML代码： CSS代码： .container { display: f...

CSS可以帮助我们实现各种各样的布局，其中之一就是将四个块分为左右各两个块。下面我们将使用CSS来实现该布局。

HTML代码：
<div class="container">
  <div class="left-block"></div>
  <div class="right-block">
    <div class="top-block"></div>
    <div class="bottom-block"></div>
  </div>
</div>

CSS代码：
.container {
  display: flex;
}

.left-block {
  width: 50%;
  height: 100px;
  background-color: blue;
}

.right-block {
  width: 50%;
  display: flex;
  flex-direction: column;
}

.top-block {
  height: 50%;
  background-color: green;
}

.bottom-block {
  height: 50%;
  background-color: yellow;
} 

上面的HTML代码中使用了一个父级容器div，该容器使用flex布局。左边的块使用了50%的宽度，右边的块同样使用了50%的宽度，并且使用了flex布局的column方向。这个方向意味着它的子元素会从上到下布局。

右边的块有两个子元素，分别是top-block和bottom-block。这两个元素的高度都是50%。这意味着这两块将会平均分配50%的空间。其中top-block的背景色是绿色，而bottom-block的背景色是黄色。

通过上述代码，我们成功实现了将四个块分为左右各两个的布局。CSS的flex布局非常强大和灵活，可以帮助我们快速实现各种复杂的布局。