zoukankan      html  css  js  c++  java
  • 布局之并列登高自适应高度解决方案

    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;

  • 相关阅读:
    FreeRTOS计数型信号量
    FreeRTOS二值信号量
    FreeRTOS队列操作
    ROMTableAddr = 0xE00FF003 错误 Target DLL has been cancelled 错误
    stm32 USART_IT_IDLE中断 一帧数据
    Moving to Express 4
    node.js 模板 ejs 转
    [译]JavaScript中,{}+{}等于多少?
    mongoose简单使用样例
    MongoVUE简单操作手册
  • 原文地址:https://www.cnblogs.com/hanbingljw/p/4667114.html
Copyright © 2011-2022 走看看