使第二个div出现在第一，没有绝对位置或改变html [英] Make second div appear above first, without absolute position or changing html

问题描述

我的网页分为3个切片，如 JFiddle 所示。

My page is split into 3 slices, as shown in this JFiddle.

在我的完整源代码中，我有媒体查询，可帮助管理移动设备和桌面设备之间的大小调整。当有人在移动模式下访问网站时，徽标应显示在顶部，项目应显示在其下方 。 （I set display：none 在我的图片div上隐藏它）

In my full source code, I have media queries to help manage sizing between mobile and desktop. When someone accesses the site on mobile mode, Logo should appear at the top, and Items should appear below it. (I set display: none on my picture div to hide it)

问题：

我无法在HTML中改变div的位置，否则会干扰我目前的3切片布局。绝对定位不是一个选项，因为我的网站大部分已经动态大小，我不想绝对定位干扰我没有测试的分辨率。这意味着计算边距大小也不会出现问题。

I can't change the positioning of the divs in HTML, or it'll disturb my current 3 slice layout. Absolute positioning is not an option, since most of my site is already dynamically sized, and I wouldn't want absolute positioning to interfere on a resolution I haven't tested on. This means calculating the margin sizes would be out of the question aswell.

因此，绝对定位是不允许的，也不会改变div的顺序。我查找的结果将类似于这，异常而不重新定位div。

So, absolute positioning is not allowed, nor is changing the orders of the divs. The result I'm looking for would be similar to this, exception without repositioning the divs.

我的问题不是媒体查询，或者如何使用媒体查询为移动设备设置大小。我只是问如何获得我想要的布局，我想要的限制（没有绝对的定位，没有计算利润，没有改变div顺序）。

My question is not about media queries, or how to size for mobile using media queries. I am only asking about how to get the layout I want with the restrictions in place (no absolute positing, no calculating margins, no changing div order).

其他问题查看：

上述重定位div元素 - 第一个答案建议重新定位div，这是我不能做的。第二个答案依赖于计算位置，这可能会干扰其他动态调整大小的元素。

Reposition div above preceding element - First answer suggests repositioning divs, which I cannot do. Second answer relies on calculating the position, which could interfere with other dynamically sizing elements.

移动第一个div显示在第二个CSS下 - 建议我使用绝对定位，我不能做

Move The First Div Appear Under the Second One in CSS - Suggests I use absolute positioning, which I cannot do

推荐答案

Flexbox布局是这里的朋友。 display：flex 可用于互换布局上的元素位置。

Flexbox layout is your friend here. display: flex can be used to interchange the elements position on the layout.

#container { display:flex; flex-direction: column; text-align:center;}
#items { order: 2 }
#logo { order: 1 }
#picture { display: none; }

<div id="container">
    <div id="items">Items</div>
    <div id="logo">Logo</div>
    <div id="picture">Picture</div>
</div>

display：flex 只适用于现代浏览器。检查 caniuse 。

display: flex works only in modern browsers. Check caniuse.

我的Android手机上的测试显示它的工作在Firefox和Chrome上，但不在股票安卓浏览器。

A test on my android mobile shows it working on Firefox and Chrome, but not on the stock Android browser.

这篇关于使第二个div出现在第一，没有绝对位置或改变html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！