zoukankan      html  css  js  c++  java
  • 两个同级div等高布局

    显示效果:

      

    css代码如下

    .wrap{
        overflow:hidden;
    }
    .left{
        width:30%;
        background:#09C;
    }
    .right{
        width:70%;
        background:#C6C;
    }
    .left, .right{
        float:left;
        word-break:break-all;
        padding-bottom:2050px;
        margin-bottom:-2000px;
    }

    div布局代码如下

    <div class="wrap">
            <div class="left">left----left----left----left----left----</div>
            <div class="right">right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----</div>
        </div>

    原理讲解:

    在这里,我们设置了较大的padding-bottom值2000px,让元素变得很高,但实际上当left和right类容不同的时候,其实他们两的高度是不一样的,这时候设置他们父级wrap的overflow:hidden属性,并对元素设置margin-bottom:-2000px,可以让元素下面2000像素被隐藏了,剩下的减少2000像素的上面部分显示着,看起来,就是一样高的了。

    完!

  • 相关阅读:
    css水平垂直居中
    JavaScript提供了哪几种“异步模式”?
    sort()
    后端开发中,可以在Cache-Control设置的常用指令
    纯函数
    react和vue
    npm(classnames) 更灵活使用类名
    shell知多少?
    常见的HTTP状态码
    axios
  • 原文地址:https://www.cnblogs.com/chengduxiaoc/p/5046797.html
Copyright © 2011-2022 走看看