css 圣杯布局和双飞翼布局

最新推荐文章于 2024-09-14 13:04:57 发布

xiaoliangsu

最新推荐文章于 2024-09-14 13:04:57 发布

阅读量157

点赞数

分类专栏： css 文章标签： css 圣杯布局双飞翼

本文链接：https://blog.csdn.net/xiaoliangsu/article/details/80737267

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Complex flexbox example</title>
  <style>
    header {
      width: 100%;
      height: 40px;
      background-color: darkseagreen;
    }

    .container {
      height: 200px;
      overflow: hidden;
      padding: 0 200px;
    }

    .middle {
      width: 100%;
      height: 200px;
      background-color: deeppink;
      float: left;

    }

    .left {
      width: 200px;
      height: 200px;
      background-color: blue;
      float: left;
      margin-left:-100%;
      position: relative; left: -200px;
    }

    .right {
      width: 200px;
      height: 200px;
      background-color: darkorchid;
      float: left;
      margin-left:-200px;
      position: relative; right: -200px;
    }

    footer {
      width: 100%;
      height: 30px;
      background-color: darkslategray;
    }
  </style>
</head>

<body>
  <header>
    <h4>Header内容区</h4>
  </header>
  <div class="container">
    <div class="middle">
      <h4>中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区</h4>
    </div>
    <div class="left">
      <h4>左边栏</h4>
    </div>
    <div class="right">
      <h4>右边栏</h4>
    </div>
  </div>
  <footer>
    <h4>Footer内容区</h4>
  </footer>



</body>

</html>