css实现两个div并排等高

最新推荐文章于 2024-02-29 16:47:09 发布

笔心

最新推荐文章于 2024-02-29 16:47:09 发布

阅读量3.3w

点赞数 5

本文链接：https://blog.csdn.net/qinshenxue/article/details/44861695

版权

- 方法一 table-cell
  - 代码
  - 运行结果
- 方法二 css3盒模型
  - 代码
  - 运行结果

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

运行结果

这里写图片描述

笔心

关注

5
点赞
踩
16

收藏

觉得还不错? 一键收藏
3
评论
css实现两个div并排等高

方法一 table-cell代码运行结果方法二 css3盒模型代码运行结果方法一 table-cell代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style> .left, .right { padding: 1
复制链接

扫一扫