css实现两个div并排等高

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

方法一 table-cell

代码


<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 divdiv>
div>
body>
html>

运行结果

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

方法二 css3盒模型

代码


<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 divdiv>
div>
body>
html>

运行结果

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

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