将div从左到右依次浮动到顶部和底部，其中div div位于bottom和right div top

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 是第二个并且将会浮动右边。

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

的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我需要在底部和当前底部我需要顶部，我尝试浮动顶部左右，左边，没有工作，任何帮助请。

Answer 1

您可以在display:flex;上使用.both，然后在media query使用flex-direction:column-reverse，这将颠倒您的框的顺序

为了示例目的，我已将background:red添加到right-go-top div。 也出于同样的原因更改了media query（它与您的media query的工作方式相同）

请参阅下面的代码段或jsfiddle＆gt;的 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：从height删除.main。因为您在main s内容（右侧和左侧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>

Answer 2

如果他们不包含无法加倍的内容，最简单的解决方案是创建正确版块的副本并隐藏或显示相应的内容。

<div class="both">
    <div class="right-go-top show-only-on-iPad-portrait"></div>
    <div class="left-go-bottom"></div>
    <div class="right-go-top hide-on-iPad-portrait"></div>
</div>


<style>
.show-only-on-iPad-portrait {
    display:none;
}
.hide-on-iPad-portrait {
    display:block;
}

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

.show-only-on-iPad-portrait {
    display:block;
}
.hide-on-iPad-portrait {
    display:none;
}

}
</style>

Answer 3

这非常难看，因为它使用绝对位置而且没有响应，但是这会影响员工

@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;
  }

  .left-go-bottom{
      top: 769px;
      position: absolute;
  }

  .right-go-top{
      position: absolute;
      top: 0px; 
  }
}

Answer 4

感谢@MihaiT的帮助我解决了问题。

这是我的答案。

<强>码

 <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 unique-flex">
   <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：

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

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

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


 @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;
  }

  .both {
    display:block;
  }

  .main {
    float: left;
    display: inline-table;
   }

  div.both.unique-flex {
   display: flex;
   flex-direction: column-reverse;
  }
 }

正如你所看到的，我制作的块我想要自己切换到自己，而顶部和底部的块使用display：block。