css实现双飞翼布局

笑到根本停不下来的Kathy思

已于 2022-05-25 10:27:20 修改

阅读量206

点赞数

分类专栏：前端文章标签： css css3 html

于 2022-05-23 14:23:47 首次发布

本文链接：https://blog.csdn.net/weixin_44478371/article/details/124926443

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

双飞翼布局

布局从上到下分为 header、container、footer，然后 container 部分定为三栏布局。这种布局方式同样分为 left、center、right。给 center 部分包裹了一个 center-inbox 通过设置 margin 主动地把页面撑开。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #header {
        height: 60px;
        background-color: #ccc;
      }
      #left {
        float: left;
        width: 100px;
        height: 500px;
        margin-left: -100%; /*调整#left的位置,值等于#center宽度*/
        background-color: #f00;
        opacity: 0.5;
      }
      #center {
        height: 500px;
        float: left;
        width: 100%;
        background-color: #eeff2b;
      }
      #center_inbox {
        height: 480px;
        border: 1px solid #000;
        margin: 0 220px 0 120px; /*关键!!!左右边界等于左右盒子的宽度,多出来的为盒子间隔*/
      }
      #right {
        float: left;
        width: 200px;
        height: 500px;
        margin-left: -200px; /*使right到指定的位置,值等于自身宽度*/
        background-color: #0f0;
        opacity: 0.5;
      }
      #footer {
        clear: both; /*注意清除浮动!!*/
        height: 60px;
        background-color: #ccc;
      }
    </style>
  </head>
  <body>
    <div id="header"></div>
    <!--中间栏需要放在前面-->
    <div id="parent">
      <div id="center">
        <div id="center_inbox">中间自适应</div>
        <hr />
        <!--方便观察原理-->
      </div>
      <div id="left">左列定宽</div>
      <div id="right">右列定宽</div>
    </div>
    <div id="footer"></div>
    <script type="text/javascript"></script>
  </body>
</html>

圣杯布局和双飞翼布局参照稀土掘金博客https://juejin.cn/post/6844903574929932301#heading-48

笑到根本停不下来的Kathy思

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css实现双飞翼布局

css实现双飞翼布局-布局从上到下分为 header、container、footer，然后 container 部分定为三栏布局。这种布局方式同样分为 left、center、right。给 center 部分包裹了一个 center-inbox 通过设置 margin 主动地把页面撑开。
复制链接

扫一扫