css 實現左右div 等高, 同時父級div就是最高的子div的高度

時間 2019-12-10

標籤 css 實現左右 div 等高同時就是最高高度欄目 CSS 简体版

原文原文鏈接

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

方法一: 經過父級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>html

方法二: 使用 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

方法三:使用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>