码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2018-08-07 13:11:58      阅读:187      评论:0      收藏:0      [点我收藏+]

标签:wrap   flow   www.   实现   net   float   高度   csdn   自己   

原文地址: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;
 }

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

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

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

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

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

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

标签:wrap   flow   www.   实现   net   float   高度   csdn   自己   

原文地址:https://www.cnblogs.com/sunnywindycloudy/p/9435839.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!