如何让绿色的DIV适合2个上面的div后？(How to make the green DIV fit right after 2 upper divs?)

编程入门行业动态更新时间:2024-10-28 09:18:00

我可以做些什么以使暗绿色div（Inner3）在蓝色和粉红色div（分别为Inner1和Inner2）之后（下方）？目前有一些“空间”。

注意：我把桔子div放在他们后面，然后才是绿色的，格式很重要（我试图在更改媒体查询的分辨率时学习如何更改css）。

.OuterDiv {
  width: 100%;
  overflow: hidden;
  padding: 0px;
  margin: 0px;
  background-color: #E3EAD7;
  height: 100%;
}
.Inner1 {
  width: 30%;
  background-color: #6D97C0;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  height: 200px;
  float: left;
}
.Inner2 {
  width: 30%;
  background-color: #ECB7D8;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  height: 200px;
  float: left;
}
.Inner3 {
  width: 300px;
  background-color: #F5E6AD;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  height: 300px;
}
.Inner4 {
  width: 60%;
  background-color: #728666;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  height: 200px;
  float: left;
} 
  <body>

  <div class="OuterDiv">
    <div class="Inner1"></div>
    <div class="Inner2"></div>
    <div class="Inner3"></div>
    <div class="Inner4"></div>
  </div>

</body> 
  
 
What can I do in order for the dark green div (Inner3) to be right after (under) the blue and pink divs (Inner1 and Inner2 respectively)?. Currently there is some kind of "space". 
Note: I put the orange div on purpose after them and only then the green one, the formation does matter (I'm trying to learn how to change css when changing resolutions on media query).  
 
 
  
  .OuterDiv {
  width: 100%;
  overflow: hidden;
  padding: 0px;
  margin: 0px;
  background-color: #E3EAD7;
  height: 100%;
}
.Inner1 {
  width: 30%;
  background-color: #6D97C0;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  height: 200px;
  float: left;
}
.Inner2 {
  width: 30%;
  background-color: #ECB7D8;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  height: 200px;
  float: left;
}
.Inner3 {
  width: 300px;
  background-color: #F5E6AD;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  height: 300px;
}
.Inner4 {
  width: 60%;
  background-color: #728666;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  height: 200px;
  float: left;
} 
  <body>

  <div class="OuterDiv">
    <div class="Inner1"></div>
    <div class="Inner2"></div>
    <div class="Inner3"></div>
    <div class="Inner4"></div>
  </div>

</body> 
  
 

                最满意答案
                
                    
                         只是改变了以下内容：  
.Inner3 {
 ...
  float:right;
}
 
 它像一个魅力一样工作。  
 JSFiddle演示 
just changed the following: 
.Inner3 {
 ...
  float:right;
}
 
and it worked like a charm. 
JSFiddle Demo