css - 如何使用百分比来容纳 div，并不完全适合

Question

我正在尝试调整我的网页，如您在此图片中所见。我不太擅长 CSS，但我已尽力而为。特别是我无法将 div3 放在它对应的位置，它向下移动。我做错了什么？

body,
html {
  width: 100%;
  height: 100%;
}

.container {
  width: 100%;
  height: 100%;
  border: 1px solid black;
}

.div1 {
  border: 1px solid red;
  width: 70%;
  height: 50%;
}

.div2_container {
  height: 50%;
  border: 1px solid blue;
  width: 70%;
}

.div2_son {
  display: inline-block;
  width: 32%;
  border: 1px solid green;
  height: 100%;
}

.div3 {
  display: inline;
  height: 100%;
  width: 30%;
  border: 1px solid brown;
}

<div class="container">
  <div class="div1">

  </div>

  <div class="div2_container">
    <div class="div2_son">

    </div>
    <div class="div2_son">

    </div>
    <div class="div2_son">

    </div>
  </div>

  <div class="div3">

  </div>

</div>

Answer 1

试试这个...更改 div1 和 div 2 容器 float:left 和 div 3 display: inline-block;

body,
html {
  width: 100%;
  height: 100%;
}

.container {
  width: 100%;
  height: 100%;
  border: 1px solid black;

}

.div1 {
  border: 1px solid red;
  width: 70%;
  height: 50%;
  float:left
}

.div2_container {
  height: 50%;
  border: 1px solid blue;
  width: 70%;
  float:left
}

.div2_son {
  display: inline-block;
  width: 32%;
  border: 1px solid green;
  height: 100%;
}

.div3 {
  display: inline-block;
  height: 100%;
  width: 29%;
  border: 1px solid brown;
  
}

<div class="container">
  <div class="div1">

  </div>

  <div class="div2_container">
    <div class="div2_son">

    </div>
    <div class="div2_son">

    </div>
    <div class="div2_son">

    </div>
  </div>

  <div class="div3">

  </div>

</div>