Question

我在google和stackoverflow上也有很多搜索，但是找不到这个问题的解决方案。我的问题是，如何控制浏览器到达断点时左浮动（mainleft）向下移动到右浮动（mainright）？感谢

关于stackoverflow的这个问题关于div浮动的优先级但是无法帮助我： Responsive CSS div positioning priority

您可以在此地址的jsfidle中查看我的问题：

https://jsfiddle.net/jamshidi/8ahb03qn/1/

HTML

 <div class="maincontainer">
 <div class="mainleft">
 mainleft
 </div>
 <div class="mainright">
 mainright
 </div>
 </div>
 <footer>
 <div class="footer-end">
 footer
 </div>
 </footer>

CSS：

 .maincontainer{
 height:auto;
 width: 700px;
 margin-top: 0px;
 margin-right: auto;
 margin-left: auto;
 margin-bottom: 0px;
 background-color: red;
 overflow: hidden;  
 }
.mainleft{
float: left;
width: 200px;
height:auto;
background-color: #D0D1F9;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0px;
}
 .mainright{
float: right;
width: 500px;
height:auto;
background-color: #C4F4D6;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0px;
}
 .footer-end{
height:35px;
width: 700px;
background-color: #bb0700;
color:#fff;
padding-right: 0px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0px;
clear:both;
}
  @media screen and (max-width: 500px) {
.mainleft{
float: none;
width: 100%;
height:auto;
background-color: #D0D1F9;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0px;
}
 .mainright{
float: none;
width: 100%;
height:auto;
background-color: #C4F4D6;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0px;
}

}

Answer 1

至少有两种方法可以做到这一点。一个用CSS，另一个用JQ

<强> 1。使用CSS ：在float:right上使用divs并重新排列HTML结构（mainright首先然后mainleft）

＆＃13;

.maincontainer{
	 height:auto;
	width: 700px;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0px;
	background-color: red;
	overflow: hidden;  
  }
    .mainleft{
	float: right;
	width: 200px;
	height:auto;
	background-color: #D0D1F9;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0px;
	}
	 .mainright{
	float: right;
	width: 500px;
	height:auto;
	background-color: #C4F4D6;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0px;
	}
     .footer-end{
	height:35px;
    width: 700px;
    background-color: #bb0700;
    color:#fff;
	padding-right: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0px;
	clear:both;
   }
      @media screen and (max-width: 500px) {
    .mainleft{
	float: none;
	width: 100%;
	height:auto;
	background-color: #D0D1F9;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0px;
	}
	 .mainright{
	float: none;
	width: 100%;
	height:auto;
	background-color: #C4F4D6;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0px;
	}
}

＆＃13;

<div class="maincontainer">
  <div class="mainright">
mainright
 </div>

  <div class="mainleft">
mainleft
  </div>
  
  </div>
   <footer>
  
   <div class="footer-end">
   footer
   </div>
   
 </footer>

＆＃13;

或看小提琴＆gt;的 solution with CSS

使用CSS
OR ，您可以将float:left留在mainleft上，但可以按照上面的示例更改结构。

<强> 2。 width JQ （如果您无法更改html结构）：当$(window).width()小于500px时，请在mainleft之后移动mainright

＆＃13;

$(window).on("resize",function(){
if($(window).width() < 500) {
   $('.mainleft').insertAfter('.mainright')
   }
})

＆＃13;

.maincontainer{
	 height:auto;
	width: 700px;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0px;
	background-color: red;
	overflow: hidden;  
  }
    .mainleft{
	float: left;
	width: 200px;
	height:auto;
	background-color: #D0D1F9;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0px;
	}
	 .mainright{
	float: right;
	width: 500px;
	height:auto;
	background-color: #C4F4D6;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0px;
	}
     .footer-end{
	height:35px;
    width: 700px;
    background-color: #bb0700;
    color:#fff;
	padding-right: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0px;
	clear:both;
   }
      @media screen and (max-width: 500px) {
    .mainleft{
	float: none;
	width: 100%;
	height:auto;
	background-color: #D0D1F9;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0px;
	}
	 .mainright{
	float: none;
	width: 100%;
	height:auto;
	background-color: #C4F4D6;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0px;
	}
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="maincontainer">
  <div class="mainleft">
mainleft
 </div>

  <div class="mainright">
mainright
  </div>
  
  </div>
   <footer>
  
   <div class="footer-end">
   footer
   </div>
   
 </footer>

＆＃13;

或看小提琴＆gt;的 solution with JQ

Answer 2

这样做的一种方法是重新定位断点上方的div。您可以使用float:left and float:right来管理它，而HTML部分则是层次结构相反的。

The Fiddle

Answer 3

你可以通过css3轻松实现这个目标。

<div class="maincontainer">
 <div class="mainright">
 mainleft
 </div>
 <div class="mainleft">
 mainright
 </div>
 </div>
 <footer>
 <div class="footer-end">
 footer
 </div>
 </footer>

您必须按代码中所示切换div的位置并应用CSS

    .mainright{
    float:right;
width:70%;
    }
    .mainleft{
    float:right;
width:30%;
    }
@media screen and (max-width: 767px) {
.mainright{
    float:none;
width:100%;
    }
    .mainleft{
    float:none;
width:100%;
    }
}

如何在响应式设计中控制<div>显示顺序？

3 个答案: