css 实现左右div 等高, 同时父级div就是最高的子div的高度

程序员会强技术 2022年11月20日

0 收藏 448 点赞 2,840 浏览 1258 个字

原文地址：https://www.cnblogs.com/cbza/p/7145384.html

方法一: 通过父级overflow:hidden, 自己设置padding-bottom 和 margin-bottom来实现.（方法一亲测有效）

#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;
 }

参考链接:  <a href=”http://yanue.net/post-35.html” target=”_blank”> 纯css实现div左右等高</a>

方法二: 使用 table-cell

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .left,
        .right {
            padding: 10px;
            display: table-cell;
            border: 1px solid #f40;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="left">
        left div
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
    </div>
    <div class="right">right div</div>
</div>
</body>
</html>

参考链接:   <a href=”http://blog.csdn.net/qinshenxue/article/details/44861695″ target=”_blank”>纯css实现div左右等高</a>

方法三:使用css3盒模型

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .wrap {
            display: -webkit-box;
        }
        .left,
        .right {
            padding: 10px;
            border: 1px solid #f40;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="left">
        left div
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
    </div>
    <div class="right">right div</div>
</div>
</body>
</html>