浮动div从左到右到顶部和底部，其中左div位于底部，右div位于顶部

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

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

我将background:red添加到right-go-topdiv中作为示例。也更改了media query出于同样的原因(它将与您的media query工作相同)

参见下面的代码片段或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中的新代码编辑

OPTION 1:从.main中删除height。因为你已经在main的内容(右和左div)上设置了一个固定的高度769px，所以.main将从内容中继承高度。

，所以它将有一个769px的自动高度，当左右div在同一行，并将有一个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>

如果它们不包含不能复制的内容，最简单的解决方案是创建一个右块的副本，并相应地隐藏或显示它。

<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>

这很难看，因为它使用了绝对位置，这没有响应，但这是staff

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

感谢@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.

相关内容

最新更新

热门标签：