zoukankan      html  css  js  c++  java
  • 自适应两栏底部对齐

    试用场景:

      2列布局,左侧单张大图,右侧内容不限

      左侧图片max-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="https://images0.cnblogs.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="https://images0.cnblogs.com/blog/704521/201412/261159174521124.jpg" alt="" width="100" class="small" />
                    <i></i>
                </div>
            </div>
        </div>
    </div>
  • 相关阅读:
    关于Python装饰器内层函数为什么要return目标函数的一些个人见解
    多项式拟合与线性回归
    numpy基本方法总结 --good
    numpy中的convolve的理解
    最容易理解的对卷积(convolution)的解释
    Python之numpy基本指令
    线性回归原理小结
    矩阵的导数与迹
    【MyBatis学习14】MyBatis和Spring整合
    【MyBatis学习13】MyBatis中的二级缓存
  • 原文地址:https://www.cnblogs.com/wanbi/p/4186999.html
Copyright © 2011-2022 走看看