自适应两栏底部对齐

<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>