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>

运行结果

css实现两个div并排等高_第1张图片

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

运行结果

css实现两个div并排等高_第2张图片

你可能感兴趣的:(css实现两个div并排等高)