javascript - 带有四个子 div 的头部 div

Question

开发者早上好

我是前端开发的新手。我遇到了以下问题:

我想要一个头部 div，头部 div 内有 4 个子 div。我怎样才能适应屏幕呢？ (见草图)

亲切的问候

Answer 1

我想你需要这个，请检查:

参见 Fiddle Demo

.container {
  border: 3px solid;
  float: left;
  width: 100%;
}
.custom_box {
  float: left;
  width: 100%;
}
.custom_box1 {
  border: 3px solid;
  float: left;
  margin: 2%;
  text-align: center;
  width: 35%;
}
.custom_box2 {
  border: 3px solid;
  float: left;
  margin: 2%;
  text-align: center;
  width: 55%;
}

<div class="container">
<div class="custom_box">
  <div class="custom_box1">
    <h1>1</h1>
  </div>
  <div class="custom_box2">
    <h1>2</h1>
  </div>
</div>
<div class="custom_box">
  <div class="custom_box1">
    <h1>1</h1>
  </div>
  <div class="custom_box2">
    <h1>2</h1>
  </div>
</div>
</div>