Div的堆栈彼此重叠，只是顺序不正确
[英]Div's stack on top of each other, just not in right order
问题描述
I have a couple divs, placed side by side and using a media query to stack them, which they do stack but I need the yellow one to be on top and the blue below it. 
我有几个div，并排放置，并使用媒体查询来堆叠它们，它们确实堆叠在一起，但是我需要黄色的在上面，蓝色在下面。 So opposite of what you see when the script is ran and not sure on how to do it. 因此，与运行脚本时所看到的相反，并且不确定如何执行脚本。
#wrapper { width:1000px; } #mydivLeft { background:blue; height:250px; width:50%; float:left; } #mydivRight { background:yellow; height:250px; width:50%; float:right; } @media only screen and (max-width:768px){ #wrapper { width:100%; } #mydivRight, #mydivLeft { display:block; float:none; width:100%; } }
<body> <div id="wrapper"> <div id="mydivLeft"> </div> <div id="mydivRight"> </div> </div> </body>
3 个解决方案
解决方案1
2 2017-01-22 02:21:12
you can use flexbox using order to reverse the order of how the elements are stacked 您可以使用flexbox使用order来颠倒元素堆叠的顺序
#wrapper { width: 1000px; max-width: 100%; display: flex; flex-wrap: wrap; height: 250px; } #wrapper div { flex: 1; } #mydivLeft { background: blue; } #mydivRight { background: yellow; } @media only screen and (max-width: 768px) { #wrapper div { flex: 0 100% } #mydivRight { order: -1 } }
<body> <div id="wrapper"> <div id="mydivLeft"> </div> <div id="mydivRight"> </div> </div> </body>
解决方案2
2 2017-01-22 02:28:46
You can use flexbox layout. 您可以使用flexbox布局。 By default the flex-direction is row , in the media queries change it to column-reverse . 默认情况下， flex-direction为row ，在媒体查询中将其更改为column-reverse 。
#wrapper { max-width: 1000px; display: flex; } #mydivLeft, #mydivRight { flex: 1; height: 250px; } #mydivLeft { background: blue; } #mydivRight { background: yellow; } @media only screen and (max-width: 768px) { #wrapper { flex-direction: column-reverse; } }
<div id="wrapper"> <div id="mydivLeft"></div> <div id="mydivRight"></div> </div>
解决方案3
0 已采纳 2017-01-22 02:19:47
You can just reverse the order of the divs in the HTML to be whatever order you want them to be. 您可以将HTML中的div顺序颠倒为您想要的顺序。
#wrapper { width:1000px; } #mydivLeft { background:blue; height:250px; width:50%; float:left; } #mydivRight { background:yellow; height:250px; width:50%; float:right; } @media only screen and (max-width:768px){ #wrapper { width:100%; } #mydivRight, #mydivLeft { display:block; float:none; width:100%; } }
<div id="wrapper"> <div id="mydivRight"> </div> <div id="mydivLeft"> </div> </div>
Alternatively, a more complicated solution is to use flexbox, and use the order property or flex-direction: column-reverse; 另外，更复杂的解决方案是使用flexbox，并使用order属性或flex-direction: column-reverse; to re-order the flex children. 重新订购弹性儿童。
#wrapper { width: 1000px; display: flex; } #wrapper > div { width: 50%; height: 250px; } #mydivLeft { background: blue; } #mydivRight { background: yellow; } @media only screen and (max-width:768px) { #wrapper { width: auto; flex-direction: column-reverse; } #wrapper > div { width: auto; } }
<div id="wrapper"> <div id="mydivLeft"> </div> <div id="mydivRight"> </div> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.