仅使用 css 更改顺序和定位
Posted
技术标签:
【中文标题】仅使用 css 更改顺序和定位【英文标题】：Change order and positioning using only css 【发布时间】：2013-06-26 22:08:42 【问题描述】：如何使用媒体查询更改 div 中的元素顺序和位置？ 下图显示了所需的行为（当浏览器窗口小于 1000px 宽时使用左图，大于时使用第二个。）：
我第一次尝试在第一种情况下使用“正常”放置，在第二种情况下使用浮动：
.box2
float: right;
但是元素 2（绿色）在容器的最右侧对齐。不靠近第一个元素。
小提琴：http://jsfiddle.net/vmkRM/1/
【问题讨论】：
澄清一下：如果显示是纵向的，你想要左边的图像，如果显示是横向的，你想要右边的图像？ 哦，我不够清楚，如果浏览器不够宽，无法呈现右图，我想要左图。 你知道这两个盒子的尺寸（特别是高度）吗？ 严格来说，没有。如果它更容易，我认为高度可能会被强制为固定值。 【参考方案1】：假设您有如下所示的标准 html：
<div id=outer>
<div id=box1></div>
<div id=box2></div>
</div>
还有这样的 CSS：
#box1
width: 150px;
height: 50px;
background-color: green;
margin: 10px;
#box2
width: 200px;
height: 100px;
background-color: orange;
margin: 10px;
我会通过添加这个 CSS 来实现窄版本：
#box1, #box2
margin-left: auto;
margin-right: auto;
我会通过添加这个 CSS 来实现宽版本：
#outer
float: left;
#box1, #box2
float: right;
#box1
margin-top: 35px;
请注意，我通过手动计算额外的上边距以垂直对齐框有点作弊。
将所有这些与媒体查询放在一起以自动完成如下所示：
#box1
width: 150px;
height: 50px;
background-color: green;
margin: 10px auto 10px auto;
#box2
width: 200px;
height: 100px;
background-color: orange;
margin: 10px auto 10px auto;
@media (min-width: 450px)
#outer
float: left;
#box1, #box2
margin: 10px;
float: right;
#box1
margin-top: 35px;
这里有一个工作小提琴：http://jsfiddle.net/UwtZW/ （请注意，我使用了较窄的宽度以使其在小提琴中很好地工作 - 但它应该很容易适应您需要的实际宽度）
如果有人知道如何在不知道高度的情况下自动实现垂直对齐，我会非常有兴趣学习。当我尝试时，我无法克服浮动/垂直对齐冲突。
【讨论】：
当我调整显示窗格的大小以使 正好为 400 像素时，它会中断，并且垂直布局是右对齐的。我有点迷惑为什么它在其余时间我必须承认。 @Gus 这可能是因为宽布局在新样式开始之前就已经换行了 - 用于切换样式的@media 触发器应该更宽。
200px + 150px 的盒子，加上 4 x 10px 的边距，加上默认的正文边距，导致 400px 的换行。我已经更新了我的代码，改为在 450 处切换样式。【参考方案2】：
试试这个
http://jsfiddle.net/vmkRM/3/
<head runat="server">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<style type="text/css">
@media (max-width: 1000px)
.container
width: 200px;
height: 200px;
.box1
margin: 26px 24px;
.box2
margin: 13px;
@media (min-width: 1000px)
.container .box1
float: right;
.container
width: 400px;
height: 150px;
.box1
margin: 50px 31px;
.box2
margin: 31px;
.container
border: 1px solid black;
.box1
width: 150px;
height: 40px;
background-color: #97D077;
.box2
width: 170px;
height: 80px;
background-color: #FFB366;
</style>
<div class="container" id="container1">
<div class="box1">
text</div>
<div class="box2">
img</div>
</div>
</body>
</html>
【讨论】：
这似乎无法处理对齐方式（垂直居中于宽，水平居中于窄）。 这会自动水平和垂直对齐框，还是手动计算？【参考方案3】：虽然 FF 和 IE 对它的支持还不够好，但 flex-box 模型是实现它的正确方法（至少从概念上讲，如果不是出于实际目的）。用 chrome 看看这个：
http://jsfiddle.net/38cNE/4/
关键部分是：
#container1
width: 200px;
height: 200px;
display: -webkit-flex;
-webkit-flex-wrap:wrap;
-webkit-flex-direction:row;
-webkit-justify-content:center;
-webkit-align-items:center;
#container2
width: 400px;
height: 150px;
display: -webkit-flex;
-webkit-flex-direction:row-reverse;
-webkit-justify-content:space-around;
-webkit-align-items:center;
【讨论】：
我从来没有听说过这个。我在哪里可以找到有关它的更多信息？ 在 chrome 上看起来不错，但不适用于 Safari 或最新的 Firefox。无论如何，谢谢。 是的，正如我所说，但请在不久的将来密切关注它。 caniuse.com/#feat=flexbox 感谢@Gus 提供的信息。这一直是 CSS 的一个缺点，很高兴看到有人在考虑一些明智的解决方案。 @jcsanyi 我发现这个页面很有帮助css-tricks.com/snippets/css/a-guide-to-flexbox【参考方案4】：对父 DIV 使用 100% 宽度，看看这个小提琴
<div style="width:100%">
<div style="width:200px;height:200px;border:solid 1px black;position:relative;float:left"></div>
<div style="width:200px;height:100px;border:solid 1px black;position:relative;float:left;margin-top:50px;margin-left:50px">
</div>
http://jsfiddle.net/ablealias/zCFff/
【讨论】：
这没有达到 OP 的要求。宽布局中右侧的项目应在窄布局中位于顶部。以上是关于仅使用 css 更改顺序和定位的主要内容，如果未能解决你的问题，请参考以下文章
在 CSS 中更改使用 ::before 和 ::after 创建的元素的顺序
在 webpack 构建期间 Vuetify CSS 更改顺序
浅析CSS——元素重叠及position定位的z-index顺序