关于float和inline-block实现不规则瀑布布局的探索
2013-09-23 11:01
736 查看
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>无标题 1</title>
<style>
div{
vertical-align:top; /*定义元素在行内的上下位置，比如sub*/
display:inline-block;
margin:0; /*值为0，依然有外边距5px*/
background:black;
width:200px;
height:200px;
}
</style>
</head>
<body style="width:616px;color:white">
<div>1</div>
<div style="height:400px;">2</div>
<div>3</div>
<!---无论是float还是inline-block，第4块将对其最长的第二块排列。因此不规则的瀑布式布局应该分好了三列，然后依次往三列中追加div。--->
<div>4</div>
<div>5</div>
</body>
</html>[/code]
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 用inline-block实现两列布局，在手机浏览器上有兼容性问题
- 关于inline-block和float的区别
- 关于使用了inline-block导致页面布局不受控制的一点说明
- 比float更好的网页布局之inline-block
- inline-block代替浮动布局float:left列表布局最佳方案
- 比float更好的页面布局inline-block
- 使用inline-block实现图片列表展示（对比float的实现）
- float布局和inline-block布局【原创】
- inline-block text-align: justify 实现自适应布局, 当子inline-block之间没有空格时失效及原因
- IE67实现inline-block布局
- inline-block代替浮动布局float:left列表布局最佳方案
- css-inline-block和float的布局二者择其一？
- 关于android实现拖动旋转角度，调整布局参数的思路
- 关于利用js实现css切换布局视图的方法
- 应不应该使用inline-block代替float ？
- 关于float /double、string类型的hash函数/hash表实现(转)
- 使用inline-block进行二栏以及三栏布局以及各种布局方式链接
- 应不应该使用inline-block代替float
- 探索关于，Android工程 混淆 proguard. 自定义混淆接口的实现类的内部类混淆处理
- 关于布局中float的常见问题及解决办法