在媒体查询中将一个div放在另一个div之上 [英] put one div above the other in media queries

问题描述

所以我有两个div，在大屏幕上它们是并排的.

So I have two divs, on big screens they are side by side.

<div1> <div2>

在较小的屏幕上，我想获得

On smaller screens, I want to get

<div2>
<div1>

我想我可以删除float并放下width:100%和display:block;.而两个div是一个在另一个之上，我们就在那儿.但是，如何将div2放在div1之上?我试着将相反的花车放进去，一个div的花车向右，另一个向左，但没有运气.

I guess I could remove the float and put width:100% and display:block;. And the two divs are the one above the other, we are half-way there. But how I put the div2 above the div1 ? I tried putting opposite floats, one div floats right, the other left, but no luck.

负毛边是否是一切都变幻莫测的响应式Web应用程序的合法解决方案?我无法将div1移到另一个下方，它们总是重叠.还是有更坚实的解决方案?设置display: table-header-group;在小提琴中有效，但在我的项目中无效，我不明白为什么.如果没有CSS3，那就太棒了.

Is negative margin a legit solution for a responsive web app where everything is fluid? I cannot get the div1 to go under the other, they always overlap. Or there is a more solid solution? Setting display: table-header-group; worked in the fiddle, but not in my project and I dont understand why. Doing it without CSS3 would be awesome.

这是小提琴

谢谢

推荐答案

我更新了您的小提琴

我在两个div中都添加了float:right;，并且我在页面上更改了顺序，如下所示:

I added float:right; to both divs and i changed there order on the page like so:

<div id="amir">amir</div>
<div id="jake">jake</div>

还有第二个版本，当amir位于顶部时此处

and there is a second version when amir is on top here

这篇关于在媒体查询中将一个div放在另一个div之上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！