html - 从左到右到顶部和底部的 float div，其中左div位于底部，右div位于顶部

Question

我有 2 个彼此相邻的 div，在 ipad(纵向)上我希望右侧 div 显示在左侧 div 的顶部。

代码:

 <div class="main">
 <div class="both">
   <div class="left-go-bottom"></div>
   <div class="right-go-top"></div>
 </div>
 </div>

 <div class="main">
 <div class="both">
   <div class="left-go-bottom"></div>
   <div class="right-go-top"></div>
 </div>
 </div>

 <div class="main">
 <div class="both">
   <div class="left-go-bottom"></div>
   <div class="right-go-top"></div>
 </div>
 </div>

CSS:

.both {
   width: 100%;
   display: -webkit-inline-box;
}

.left-go-bottom, right-go-top {
   height: 769px;
   width: 50%;
   background-color: darkblue;
}

.main {
  display: block;
  width: 100%;
  height: 769px;
}

第一个 div 类 .left-go-bottom 是第一个，将位于左侧，第二个 div 类 right-go-top 是第二个，并将 float 在上面右侧。

对于我添加的断点处的媒体查询。

CSS:

@media only screen and (max-device-width: 1024px) and 
  (min-device-width: 768px) and (orientation: portrait) {

.left-go-bottom, .right-go-top {
    width: 100%;
    float: left;
    display: block;
 }

}

所以它工作正常，但是顶部的div我需要在底部，当前底部的div我需要顶部，我尝试 float 顶部的右下角和左下角，没有工作，请提供帮助。

Answer 1

您可以在.both上使用display:flex;，然后在媒体查询中使用flex-direction:column-反向这将颠倒你的盒子的顺序

出于示例目的，我已将 background:red 添加到 right-go-top div 中。 出于同样的原因，还更改了媒体查询(它与您的媒体查询的工作方式相同)

请参阅下面的片段或jsfiddle > jsfiddle flex

如果有帮助请告诉我

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

.left-go-bottom,.right-go-top  {
   height: 769px;
   width:50%;
}
 .left-go-bottom{
   background-color: darkblue;  
}
 .right-go-top{
   background-color: red;  
}

 
@media only screen and (max-width: 768px) {

.left-go-bottom, .right-go-top {
    width: 100%;
    float: left;
    display: block;
 }
 .both {
   flex-direction:column-reverse
 }
}

<div class="both">

   <div class="left-go-bottom"></div>
   <div class="right-go-top"></div>
</div>

使用 OP 中的新代码进行编辑

选项 1:从 .main 中删除 height 。因为您已在 main 的内容(左右 div)上设置了 769px 的固定高度，因此 .main 将从内容继承高度。

所以左右div在同一行时自动高度为769px，移动端高度为769px*2 = 1538。如果您不写入固定高度，则会自动发生这种情况。

请参阅下面的解决方案代码片段

.both {
   width: 100%;
  display:flex;
}
.main {
  display: block;
  width: 100%;
  /* height:758px removed */ 
}
.left-go-bottom,.right-go-top  {
   height: 769px;
   width:50%;
}
 .left-go-bottom{
   background-color: darkblue;  
}
 .left-go-bottom.green {
   background:green
 }
 .right-go-top{
   background-color: red;  
}
  .right-go-top.yellow{
   background-color: yellow;  
}
@media only screen and (max-width: 768px) {

.left-go-bottom, .right-go-top {
    width: 100%;
    float: left;
    display: block;
 }
 .both {
   flex-direction:column-reverse;
 }
}

<div class="main">
 <div class="both">
   <div class="left-go-bottom green"></div>
   <div class="right-go-top yellow"></div>
 </div>
 </div>

 <div class="main">
 <div class="both">
   <div class="left-go-bottom"></div>
   <div class="right-go-top"></div>
 </div>
 </div>

 <div class="main">
 <div class="both">
   <div class="left-go-bottom green"></div>
   <div class="right-go-top yellow"></div>
 </div>
 </div>

选项 B 不推荐。但是您可以在 .main 上设置固定高度，尽管它没有用，因为正如我在前面的解决方案中所说， .main 继承了内部两个 div 的高度它和固定高度为 769px

但是如果你真的想要的话。您可以在桌面版本上设置高度 769px，当 div 位于不同行时设置高度 1538px。 (他们的高度总和)

请参阅下面的代码片段:

.both {
   width: 100%;
  display:flex;
}
.main {
  display: block;
  width: 100%;
  height: 769px;
}
.left-go-bottom,.right-go-top  {
   height: 769px;
   width:50%;
}
 .left-go-bottom{
   background-color: darkblue;  
}
 .left-go-bottom.green {
   background:green
 }
 .right-go-top{
   background-color: red;  
}
  .right-go-top.yellow{
   background-color: yellow;  
}
@media only screen and (max-width: 768px) {

.left-go-bottom, .right-go-top {
    width: 100%;
    float: left;
    display: block;
 }
 .both {
   flex-direction:column-reverse;
 }
 .main {
     height: 1538px; /* added */
 }
}

<div class="main">
 <div class="both">
   <div class="left-go-bottom green"></div>
   <div class="right-go-top yellow"></div>
 </div>
 </div>

 <div class="main">
 <div class="both">
   <div class="left-go-bottom"></div>
   <div class="right-go-top"></div>
 </div>
 </div>

 <div class="main">
 <div class="both">
   <div class="left-go-bottom green"></div>
   <div class="right-go-top yellow"></div>
 </div>
 </div>