vas*_*ort 13 html css media-queries responsive-design
我想改变某个像素大小的浮动div的顺序.
在默认状态下,它们都具有50%的宽度,并且它们彼此相邻.
低于600px的屏幕尺寸(或w/e无关紧要)我希望第二个div(红色一个)漂浮在第一个div(黄色一个)之上.
如何仅使用CSS解决方案？
HTML
<div class="yellow"></div>
<div class="red"></div>
CSS
.yellow {
background: yellow;
width: 50%;
height: 300px;
float:left;
}
.red {
background: red;
width: 50%;
height: 300px;
float:left;
}
@media screen and (max-width:600px) {
.yellow {
background: yellow;
width: 100%;
height: 300px;
float:left;
}
.red {
background: red;
width: 100%;
height: 300px;
float:left;
}
}
我想要的解决方案是:
RED DIV
黄色的DIV
但现在是:
黄色的DIV
RED DIV
Sea*_*ean 21
我知道你正在问如何利用浮点数完成这个,但据我所知使用纯CSS这是不可能的(至少没有使用令人讨厌的定位,你说你不想这样做).
据我所知,纯HTML/CSS实现这一目标的唯一好方法是利用新的flexbox规范(一个好的起点可能就是这篇css技巧文章).
当您使用flexbox时,您可以使用order项目上的属性来指示哪些订单商品出现在(duh)
你可以在这里看到一个这样的例子,HTML代码类似于你所拥有的,添加了包装元素(我还修复了DOCTYPE声明):
<!DOCTYPE html>
<div class="wrapper">
<div class="yellow">
</div>
<div class="red">
</div>
</div>
CSS有点不同:
.wrapper {
display: flex;
flex-flow: row wrap;
}
.yellow {
background: yellow;
width: 20%;
height: 300px;
}
.red {
background: red;
width: 20%;
height: 300px;
}
@media screen and (max-width:600px) {
.yellow {
order: 2;
width: 100%;
}
.red {
order: 1;
width: 100%;
}
}
我也清理了一下,你的媒体查询中有重复的代码,实际上并不需要在那里.
唯一的缺点是它在撰写时目前仅适用于大约80%的浏览器:
http://caniuse.com/#search=flexbox
根据您可能正常的目标市场,您可以使用正常降级,以便除了在不完全支持Flexbox的设备上的排序之外,它以各种方式正确显示.
我猜你也只是真正针对移动设备重新排序的东西,支持很好,所以它可能适合你.
试着改变你的想法
HTML到此 -
<div class="container">
<div class="yellow"></div>
<div class="red"></div>
</div>
和你的@media查询CSS到此 -
@media screen and (max-width:600px) {
.container{
display:flex;
flex-direction: column-reverse;
}
.yellow {
background: yellow;
width: 100%;
height: 300px;
}
.red {
background: red;
width: 100%;
height: 300px;
} }
这是一个使用负边距和浮点数的简单解决方案.
对于CSS,请使用以下内容:
@media screen and (max-width:600px) {
.yellow {
background: yellow;
width: 100%;
height: 300px;
float:left;
margin-top: 300px;
}
.red {
background: red;
width: 100%;
height: 300px;
float:left;
margin-left: -100%;
}
}
您的HTML与发布的内容保持一致.
一个上边距添加到.yellow使用margin-top: 300px(等于红色div的高度).
对于红色div,添加100%的负左边距.
这将强制红色div将自己定位在黄色div上,但由于你的黄色div是一个上边距,黄色div会在红色div下弹出.
诀窍类似于用于Holy Grail 3列布局设计的技巧.
见演示:http://jsfiddle.net/audetwebdesign/jux84wzk/