使用CSS媒体查询在其他容器之间拉出2个容器
使用CSS媒体查询在其他容器之间拉出2个容器
提问于 2012-06-16 03:09:53
我需要使用CSS媒体查询来拉出右侧的第二个和第四个框。当浏览器加宽时，框2和4需要向右移动，框2需要在框1下保持齐平。框的顺序是必需的。
我想出的解决方案是接近的，但是当框2的文本太长时，它会将框3向下推。重要的是，框3在框1下保持平齐。
下面是一个用JsFiddle编写的示例：http://jsfiddle.net/FJswg/
<html>
<style>
body {
margin:0;
padding:0;
}
div {
padding:10px;
}
#box1 {
color:#fff;
background-color:#00f;
}
#box2 {
background-color:#0f0;
}
#box3 {
background-color:#f00;
}
#box4 {
color:#fff;
background-color:#000;
}
@media screen and (min-width: 500px) {
#box1 {
float:left;
clear:left;
width:150px;
}
#box2 {
margin-left:170px;
}
#box3 {
float:left;
clear:left;
width:150px;
}
#box4 {
margin-left:170px;
}
}
</style>
<body>
<div id="box1">Box 1</div>
<div id="box2">Box 2, Consectetur gentrify gluten-free fanny pack, bespoke enim ethical letterpress pitchfork ullamco pickled.</div>
<div id="box3">Box 3</div>
<div id="box4">Box 4, 8-bit mumblecore excepteur readymade single-origin coffee fingerstache mlkshk. Sint fanny pack raw denim quinoa. Ennui vero photo booth magna.</div>
</body>
</html>更新
如果我必须使用JavaScript，这是最干净的方法吗？http://jsfiddle.net/FJswg/8/
var size = 0;
$(window).resize(function() {
checkWidth();
});
$(document).ready(function() {
checkWidth();
});
function checkWidth() {
var newWidth = $(window).width();
var newSize = 0;
if (newWidth >= 500) {
newSize = 1;
}
if (newSize != size) {
size = newSize;
$moveElement = (size < 0) ? $("#box2") : $("#box3");
$("#box1").after($moveElement);
}
}?回答 1
Stack Overflow用户
发布于 2012-06-16 03:28:59
一种选择是使用相对+绝对定位。请在此处查看demo。
@media screen and (min-width: 500px) {
#box1 {
float:left;
clear:left;
width:150px;
}
#box2 {
margin-left:170px;
}
#box3 {
top: 50px;
clear:left;
width:150px;
position: absolute;
}
#box4 {
margin-left:170px;
}您可能还需要使用javascript将高度动态设置为box1 top。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11056783
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号