这是我有的：
这就是我想要的：
这是我的代码：
<!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,…),这将是完美的.
jQuery Masonry
或者你可以做的最好的是this
CSS
#d7,#d3{ height: 200px; background-color: red; float: left;} 第三个可能性：
将盒子包裹起来,并相应地浮动
Demo(只有当静态时才可能):)
总结以上是内存溢出为你收集整理的html – 如何在图块中浮动不同大小的元素全部内容，希望文章能够帮你解决html – 如何在图块中浮动不同大小的元素所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）