使第二个div首先出现在上面，不需要绝对位置或更改html。
我的页面被分割成3个切片，如这个JFiddle所示。
在我的完整源代码中，我有媒体查询来帮助管理移动和桌面之间的大小。当有人以移动模式访问站点时，Logo应该出现在顶部，Item应该出现在它下面。(我在我的图片div上设置了display: none来隐藏它)
问题：
我不能改变div在HTML中的位置，否则它会干扰我当前的3片布局。绝对定位不是一种选择，因为我的大部分站点已经是动态大小的，我不希望绝对定位干扰到我还没有测试过的分辨率。这意味着计算保证金大小也是不可能的。
因此，绝对定位是不允许的，也不允许改变div的顺序。我正在寻找的结果将类似于这，异常而不重新定位div。
我的问题不是媒体查询，也不是如何使用媒体查询来调整移动设备的大小。我只是问如何获得我想要的布局与限制到位(没有绝对位置，没有计算边距，不改变div顺序)。
我看过的其他问题：
重排前项div --第一个答案是重新定位div，这是我做不到的。第二个答案依赖于位置的计算，这可能会干扰其他动态调整大小的元素。
将第一个分区移动到CSS中的第二个分区下面 --建议我使用绝对定位，这是我无法做到的。
回答 3
Stack Overflow用户
发布于 2014-12-09 08:08:26
Flexbox布局是您的朋友。display: flex可用于交换布局上的元素位置。
#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只在现代浏览器中工作。检查犬科。
在我的android手机上的一个测试显示，它可以在Firefox和Chrome上工作，而不是在普通的Android浏览器上工作。
Stack Overflow用户
发布于 2014-12-09 09:35:29
我试着用transform: translateY属性来解决这个问题。
注:这是在两个容器高度相同的情况下起作用的。或者，如果已经知道高度，则可以根据高度设置transform: translateY值。
CSS
@media (max-width: 700px) {
#container > div {
width: auto;
display: block;
float: none;
}
#container #picture {
display: none;
}
#logo {
transform: translateY(-100%);
}
#items {
transform: translateY(100%);
}
}工频
Stack Overflow用户
发布于 2014-12-09 07:50:10
最简单的可能是如果你玩负边距。请注意，以下大小(宽度和边距)可能需要根据您的特定需要进行调整。
#container * {
width: 95vw;
text-align: center;
}
#items {
width: 50%; /* #picture is hidden so we split the screen into 2 */
float: left;
margin-top:30px; /* has to be smaller than the absolute of #logo */
margin-left:25%; /* half of the element's width */
}
#logo {
width: 50%; /* #picture is hidden so we split the screen into 2 */
float: right;
margin-top:-40px; /* its absolute has to be greater than the one of #items */
margin-right:25%; /* half of the element's width */
}
#picture {
width: 33%;
float: right;
display:none; /* Hiding #picture as you said you would */
}<div id="container">
<div id="items">Items</div>
<div id="logo">Logo</div>
<div id="picture">Picture</div>
</div>
https://stackoverflow.com/questions/27373685
复制相似问题
腾讯云开发者
