如何在图块中浮动具有不同大小的元素
Ale*_*ack 10 html css layout css3 css-float
问题很简单.我有一堆要制作瓷砖的元素.然而,其中一些有更长的高度; 让我们说两倍于其他人.我希望所有这些都只是通过纯CSS样式在瓷砖中匹配.
这是我有的:
这就是我想要的:
这是我的代码:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
box-shadow: 0 0 1px black inset;
width: 100px;
display: inline-block;
}
#d1,
#d2,
#d4,
#d5,
#d6,
#d8,
#d9{
height: 100px;
background-color: yellow;
}
#d7,
#d3{
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="d1">1</div><div id="d2">2</div><div id="d3">3</div><div id="d4">4</div><div id="d5">5</div><div id="d6">6</div><div id="d7">7</div><div id="d8">8</div><div id="d9">9</div>
</body>
</html>
你可以在JSBin上试一试:http://jsbin.com/usovek/1/edit
笔记:
- 内容是动态的
- 盒子的数量可以变化
- 任何盒子都可以更长.可能更广泛.
- 盒子的宽度或高度总是多个单位.此示例中的单位为50,有些框为50,有些则为100px高.但如果问题解决了任何数量的单位(1,2,3 ... 50px,100px,150px,......)将是完美的
如果你的内容是静态的,你可以在一个相对定位的容器中使用位置绝对块,但是如果内容是动态的,你不能用CSS(仅)做到这一点,你需要使用的是
或者你能做的最好的就是这个
CSS
#d7,
#d3{
height: 200px;
background-color: red;
float: left;
}
第三种可能性:将包装盒装入容器并相应地浮动
演示(只有当事情是静止时才可能):)
- 感谢JQuery Masonry的链接.这绝对是太棒了.但是,如果可能的话,我更喜欢使用纯CSS.我也喜欢你的CSS解决方案,即使它改变了元素的顺序.如果没有其他人提供更好的解决方案,纯CSS和正确的顺序,我会接受这个答案. (2认同)
| 归档时间： |
|
| 查看次数： |
7796 次 |
| 最近记录： |