css 圣杯布局和双飞翼布局

最新推荐文章于 2026-01-01 20:08:21 发布

原创最新推荐文章于 2026-01-01 20:08:21 发布 · 209 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #圣杯布局 #双飞翼

css 专栏收录该内容

10 篇文章

订阅专栏

本文通过一个复杂的网页布局示例展示了如何使用Flexbox实现多栏布局。左侧栏、中间内容区域及右侧栏均被合理安排，并确保了内容的正确显示与自适应。此布局方案适用于需要灵活调整页面元素的应用场景。

<!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>

参考：https://www.jianshu.com/p/f9bcddb0e8b4