css实现两个div并排等高

最新推荐文章于 2020-12-20 05:21:57 发布

yuemei_1991

最新推荐文章于 2020-12-20 05:21:57 发布

阅读量1.3k

点赞数

分类专栏： html css jquery 文章标签： css

html css jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

原文链接：http://blog.csdn.net/qinshenxue/article/details/44861695

css实现两个div并排等高

方法一 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>

运行结果

这里写图片描述

方法二 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>