css实现两个div并排等高

来源：互联网发布：sql case when null 编辑：程序博客网时间：2024/06/07 23:23

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

css实现两个div并排等高

- css实现两个div并排等高
- 方法一 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>

运行结果

这里写图片描述

阅读全文

0 0