等高列设置 - - php.cn博客

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>等高列设置</title>
  </head>
  <style>
    .wrapper {
      margin-left: -2em;
      margin-right: -2em;
    }
    .container {
      display: table;
      width: 100%;
      border-spacing: 1.5em 0;
    }
    .main {
      display: table-cell;
      background-color: gray;
      width: 60vw;
      color: #fff;
      font-size: 1.5em;
      font-family: "微软雅黑";
    }
    .sidebar {
      display: table-cell;
      padding: 2em;
      background-color: firebrick;
    }
  </style>
  <body>
    <div class="wrapper">
      <div class="container">
        <div class="main">
          同志们，朋友们：
          今天，我们在这里隆重集会，纪念中国人民志愿军抗美援朝出国作战70周年。
          70年前，由中华优秀儿女组成的中国人民志愿军，肩负着人民的重托、民族的期望，高举保卫和平、反抗侵略的正义旗帜，雄赳赳、气昂昂，跨过鸭绿江，发扬伟大的爱国主义精神和革命英雄主义精神，同朝鲜人民和军队一道，历经两年零9个月艰苦卓绝的浴血奋战，赢得了抗美援朝战争伟大胜利。
        </div>
        <div class="sidebar"></div>
      </div>
    </div>
  </body>
</html>
效果图：