html - 如何以某种方式使不同尺寸的盒子彼此相邻

Question

我正在制作一个网页，想法是底部有方框页面上有一些文字。所以做一个盒子并不难，

但我的问题是:如何制作我画的这样的方框:

如何像我提供的链接那样制作/排列方框。到目前为止，我尝试使其相同的尝试都失败了，盒子没有出现或者看起来很乱。

到目前为止我有这个:

.div1 {
  width: 500px;
  height: 100px;
  border-radius: 25px;
  padding: 15px;
  box-sizing: border-box;
  background: #73B7DB;
  margin-left: 5%;
  color: #fff;
}

.div2 {
  width: 200px;
  height: 100px;
  border-radius: 25px;
  padding: 15px;
  box-sizing: border-box;
  background: #73B7DB;
  color: #fff;
  margin-left: 5%;
}

.container2 {
  float: left;
  margin: 0 auto;
  width: 100%;
  display: flex;
}

<div class="container2">
  <div class="div1">Title!</div>
  <br>
  <div class="div2">Title!</div>
</div>

Answer 1

您可以将它们放入 flex 包装器中，并将容器本身也定义为具有 flex-direction: column 的 flex 容器，如下所示。

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

.wrapper {
  display: flex;
  width: 100%;
}

.container1,
.container2 {
  display: flex;
  flex-direction: column;
}

.container1 {
  width: 70%;
}

.container2 {
  width: 30%;
}

.div1 {
  width: 90%;
  height: 100px;
  border-radius: 25px;
  padding: 15px;
  background: #73B7DB;
  margin-left: 5%;
  color: #fff;
  margin-bottom: 10px;
}

.div2 {
  width: 90%;
  height: 160px;
  border-radius: 25px;
  padding: 15px;
  background: green;
  color: #fff;
  margin-left: 5%;
  margin-bottom: 10px;
}

<div class="wrapper">

  <div class="container1">
    <div class="div1">Title!</div>
    <div class="div1">Title!</div>
    <div class="div1">Title!</div>
    <div class="div1">Title!</div>
    <div class="div1">Title!</div>
  </div>
    <div class="container2">
      <div class="div2">Title!</div>
      <div class="div2">Title!</div>
      <div class="div2">Title!</div>
      <div class="div2">Title!</div>
      <div class="div2">Title!</div>
    </div>
  </div>