下面
我在主div中有3个div，标记在下面的HTML/CSS代码中，当页面呈现时，第二个div是第一个和最后一个的两倍大。当页面呈现时，由于第二个div的大小是第一个和最后一个的两倍，这将导致最后一个div显示在第二个div的下方，在两者之间留下空白。我想要的是第三个div占用
<html>
<head>
<title>Liquid Divs</title>
<style>
#splash {
width: 600px;
margin: 1px;
border: solid 1px #ccc;
}
.box {
width: 196px;
height: 196px;
margin: 1px;
border: solid 1px #ccc;
float: left;
}
.box2 {
width: 392px;
height: 392px;
margin: 1px;
border: solid 1px #ccc;
float: left;
}
.clear-fix {
clear: both;
}
</style>
</head>
<body>
<div id="splash">
<div class="box">
</div>
<div class="box2">
</div>
<div class="box">
</div>
<div class="clear-fix">
</div>
</div>
</body>
</html>
这可以用CSS完成，或者有人知道用javascript完成这一任务的方法吗?把这件事弄清楚会很有帮助的。
将box2设置为右浮动
.box2 {
width: 392px;
height: 392px;
margin: 1px;
border: solid 1px #ccc;
float: right;
}
测试过了，它可以把第三个框放在第一个
如果你打算在#splash中包含更多的元素，你是在jQuery插件砌筑
下面是扩展问题的解决方案演示
http://jsfiddle.net/kxMYS/
$( function() {
$('#splash').masonry({
itemSelector: 'div'
});
});
如果你只想要一个解决你确切给定问题的方法
把.box2改成float:left;
http://jsfiddle.net/kxMYS/1/
第一个和第三个盒子在左容器中，大盒子在右容器中试试这个:http://jsfiddle.net/wcQ3L/1/
<html>
<head>
<title>Liquid Divs</title>
<style>
#splash {
width: 600px;
margin: 1px;
border: solid 1px #ccc;
}
#left-container{
float: left;
}
.box {
width: 196px;
height: 196px;
margin: 1px;
border: solid 1px #ccc;
}
.box2 {
width: 392px;
height: 392px;
margin: 1px;
border: solid 1px #ccc;
float: left;
}
.clear-fix {
clear: both;
}
</style>
</head>
<body>
<div id="splash">
<div id="left-container">
<div class="box">
</div>
<div class="box">
</div>
</div>
<div id="right-container">
<div class="box2">
</div>
</div>
<div class="clear-fix">
</div>
</div>
</body>
</html>