首页 > 代码库 > 自适应两栏底部对齐
自适应两栏底部对齐
试用场景：
2列布局，左侧单张大图，右侧内容不限
左侧图片max-width:100%; height: auto;
右侧内容最外层div设置position:relative; height:0; padding-bottom: (高px值/宽px值)*100%;
<style> *{margin: 0; padding:0;} body{font-size: 12px;} img{max-width:100%; height:auto;} .clearfix:after{content: ‘‘; clear:both; display: table;} .wrap{max-width: 100em; margin:0 auto;} .left{float: left; width: 66.67%;} .right{float:left; width: 33.33%; } .in{position:relative; height: 0; padding-bottom: 150%;} .small{position: absolute; bottom:0; right:0;}</style><div class="wrap clearfix"> <div class="left"><img src="http://i.i-lewan.com/products_new/800x600/0e/great-barrier-reef-589514.jpg" alt="" /></div> <div class="right"> <div class="in"> div.in层用height:0;padding-bottom:150%;设置高度为父元素的100%撑开 <img src="http://images.cnitblog.com/blog/704521/201412/261159174521124.jpg" alt="" width="100" class="small" /> </div> </div></div>
右侧换单张图片垂直居中
<style> *{margin: 0; padding:0;} body{font-size: 12px;} img{max-width:100%; height:auto;} .clearfix:after{content: ‘‘; clear:both; display: table;} .wrap{max-width: 100em; margin:0 auto;} .left{float: left; width: 66.67%;} .right{float:left; width: 33.33%; } .in{position:relative; height: 0; padding-bottom: 150%;} .vertical{position: absolute; top: 0; left:0; right:0; bottom:0; text-align:center;} .vertical img{display: inline-block; vertical-align: middle;} .vertical i{display: inline-block; height: 100%; vertical-align:middle;}</style><div class="wrap clearfix"> <div class="left"><img src="http://i.i-lewan.com/products_new/800x600/0e/great-barrier-reef-589514.jpg" alt="" /></div> <div class="right"> <div class="in"> <div class="vertical"><!--vertical层定义了top，left，right，bottom4个值为0，就定义了一个新的边界框，把该div层撑开到填满父元素，就能获取到100%高度--> <img src="http://images.cnitblog.com/blog/704521/201412/261159174521124.jpg" alt="" width="100" class="small" /> <i></i> </div> </div> </div></div>
自适应两栏底部对齐
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。