您的位置：首页 > 其它

布局之并列登高自适应高度解决方案

2015-07-22 13:10 260 查看

1.css多列等高-利用padding-bottom|margin-bottom正负值相抵参考http://www.51xuediannao.com/html+css/htmlcssjq/683.html

由于布局需要左右两列并列布局，且左右两列内容量不同，高度也要自适应，为让两列等高：可以使用padding-bottom|margin-bottom的正负值相抵消:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>css 多列等等高解决方案</title>
</head>
<style>
body{margin:0;padding:0;}
.fl{float:left;}
.fr{float:right;}
.clearfix:after{clear: both;content:"";height:0;visibility: hidden;overflow: hidden;}
.clearfix{zoom:1;}
.gray{background-color:gray; width:50%;}
.blue{background-color:blue; width:50%;height:200px;}/**因为无内容故设height：200px;实际使用时应设height:auto;**/
.container1,.container2{width:80%;height:auto;margin:20px auto;border:1px solid #e2e2e2;overflow: hidden;}
</style>
<body>
<div class="container1 clearfix">
<div class="fl gray">这是left</div>
<div class="fl blue">这是right</div>
</div>
<div class="container2 clearfix">
<div class="fl blue" style="margin-bottom:-100000px;padding-bottom:100000px;">这是left 使用了margin-bottom与padding-bottom正负值相抵消</div>
<div class="fl gray" style="margin-bottom:-100000px;padding-bottom:100000px;">这是right 使用了margin-bottom与padding-bottom正负值相抵消</div>
</div>

</body>
</html>

效果:

注意:1.因为使用了浮动布局，父类需要浮动闭合

　　 2.父类要添加overflow:hidden;

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航