html - 如何将 div 放在容器内彼此之上？

Question

我试图将四个元素放入一个容器 div 中；我对 div 2 和 div 3 有疑问，我不能将它们放在彼此之上!那么在这种情况下如何将 2 个 div 放在一个容器内？

HTML:

<div class = "Container"> 
   <div class = "Div1" > </div>
   <div class = "Div_Mid!!" > </div>    
   <div class = "Div4" > </div>
</div>

CSS:

   .Container {height: 15px;width: 50%;float: left;}

   .Div1 {height: 15px;width: 20%;float: right;}

   .Div4 {height: 15px;width: 20%;float: left;}

   .Div2  {height: 15px;width: 20%;float: ??????????} 

Answer 1

请检查此基本布局并将您的 HTML 插入其中。我已经为所有 div 添加了边框以便 div 大小的可见性，请忽略它。

div{
  border:1px solid black;
}
.container{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:  flex;
}
.left{
  width:33.33333333333333%;
  float: left;
}
.center{
  width:33.33333333333333%;
  float:left;
}
.right{
  width:33.33333333333333%;
  float:left;
}

<div class="container">
  <div class="left">
    left div
  </div>
  <div class="center">
    <div>top div</div>
    <div>bottom div</div>
  </div>
  <div class="right">
    right
  </div>
</div>