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>
  • 相关阅读:
    C++下载数据至.map/.txt/.list文件
    Byte数组转浮点数
    linux下进程的最大线程数、进程最大数、进程打开的文件数
    linux后台程序开发常用工具
    linux下csv导出文件中文乱码问题
    50个高端大气上档次的管理后台界面模板(转)
    如何注册.net 的类库dll 为com组件(转)
    vue页面信息
    CSS特效
    Css样式
  • 原文地址:https://www.cnblogs.com/wanbi/p/4186999.html
Copyright © 2011-2022 走看看