圣杯布局&双飞翼布局

最新推荐文章于 2024-08-21 10:36:09 发布

Jackshijin

最新推荐文章于 2024-08-21 10:36:09 发布

阅读量298

点赞数

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

本文链接：https://blog.csdn.net/Jackshijin/article/details/111868159

版权

前端同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

css

6 篇文章 0 订阅

订阅专栏

前言：上班划水偷空了解了一下圣杯布局和双飞翼布局，一听这两个名字，觉得不明觉厉，其实就是三栏布局，左右两边的盒子宽度固定，中间的盒子宽度自适应。以下内容均是总结互联网上别人的文章。觉得有意思就记录一下。。。

圣杯布局，方法一:

<style>
        .container{
            padding: 0 200px;
        }
        .middle{
            width: 100%;
            background: paleturquoise;
            height: 200px;
            float: left;
            text-align: center;
        }
        .left{
            background: palevioletred;
            width: 200px;
            height: 200px;
            float: left;
            font-size: 40px;
            color: #fff;
            margin-left:-100%;
            position: relative;
            left: -200px;
        }
        .right{
            width: 200px;
            height: 200px;
            background: purple;
            font-size: 40px;
            float: left;
            color: #fff;
            margin-left:-200px;
            position: relative;
            right: -200px;
        }
  </style>
</head>
<body>
  <div class="container">
    <!-- 中间栏放在前面优先渲染 -->
    <div class="middle">好好挂机吧更好的规划规范过的很好的借口你好好火狐u湖库及高度和</div>
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
</body>

不使用定位，在中间盒子控制padding（以下代码仅仅包含样式代码）

.container{
            /* padding: 0 200px; */
        }
        .middle{
            width: 100%;
            background: paleturquoise;
            height: 200px;
            float: left;
            text-align: center;
            box-sizing: border-box;
            padding: 0 200px;
        }
        .left{
            background: palevioletred;
            width: 200px;
            height: 200px;
            float: left;
            font-size: 40px;
            color: #fff;
            margin-left:-100%;
            /* position: relative;
            left: -200px; */
        }
        .right{
            width: 200px;
            height: 200px;
            background: purple;
            font-size: 40px;
            float: left;
            color: #fff;
            margin-left:-200px;
            /* position: relative;
            right: -200px; */
        }

双飞翼布局：（最终效果跟圣杯布局没什么区别）

<style>
        * {
            box-sizing: border-box;
        }

        .main-inner {
            margin-left:200px;
            margin-right: 200px;
        }

        .content {
            overflow: hidden;
        }
        .content > div {
            float: left;
        }
        .main {
            width: 100%;
            height:200px;
            border:1px solid red;
        }
        .left {
            width:200px;
            margin-left: -100%;
            height:200px;
            border:1px solid #000;
        }
        .right {
            width:200px;
            margin-left: -200px;
            height:200px;
            border:1px solid #000;
        }
  </style>
</head>
<body>
  <div class="content">
    <!-- 中间栏放在前面优先渲染 -->
    <div class="main">
      <div class="main-inner">好好挂机吧更好的规划规(123)范过的很好(误会的话)的借口你好好火狐u湖库及高度和</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
</body>