web前端入门到实战：css实现内容不相同的左右两个div等高

问题提出

现在有两个div左右排列，但是两个div的内容不相同，如何设置两个div的css做到在两个div等高排列呢？下面是3种实现方法，觉得很有代表性，所以索性收藏起来。

方法一

通过父元素设置 overflow:hidden, div自己设置padding-bottom 和 margin-bottom来实现。

<div id="#warp">
    <div>
        <br>
        <br>
        <br>
        left
    </div>
    <div>right</div>
</div>

#wrap {
    overflow: hidden;
    width: 1000px;
    margin: 0 auto;
}
#left,
#center {
    margin-bottom: -10000px;
    padding-bottom: 10000px;
}
#left {
    float: left;
    width: 250px;
    background: #00ffff;
}
#center {
    float: left;
    width: 500px;
    background: #ff0000;
}

方法二

使用 table-cell

.left,
.right {
    padding: 10px;
    display: table-cell;
    border: 1px solid #f40;
}

方法三

父元素使用 display: box;

.wrap {
    display: -webkit-box;
}
.left,
.right {
    padding: 10px;
    border: 1px solid #f40;
}

效果如下图：

自己是一个6年的前端工程师,希望本文对你有帮助！

这里推荐一下我的前端学习交流扣qun：731771211 ，里面都是学习前端的，如果你想制作酷炫的网页，想学习编程。自己整理了一份2019最全面前端学习资料，从最基础的HTML+CSS+JS【炫酷特效，游戏，插件封装，设计模式】到移动端HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴，每天分享技术

点击：加入