双飞翼布局

最新推荐文章于 2022-09-26 01:25:24 发布

RDSunday

最新推荐文章于 2022-09-26 01:25:24 发布

阅读量93

点赞数

分类专栏：前端文章标签：布局双飞翼布局定位 html5

本文链接：https://blog.csdn.net/weixin_43755104/article/details/105293677

版权

前端专栏收录该内容

42 篇文章 0 订阅

订阅专栏

双飞翼布局

在这里插入图片描述

双飞翼布局和圣杯布局很类似，不过是在middle的div里又插入一个div，通过调整内部div的margin值，实现中间栏自适应，内容写到内部div中。
这样可以先做好主体部分，然后再将附属部分放到合适的位置！

双飞翼布局增加了一个div,widht=100%,height=100%
div用margin 0 rightWidth 0 leftWidth,来实现自适应
没有用到position

双飞翼布局省去了很多css，而且由于不用使用定位，可以获得比圣杯布局更小最小宽度；

说到这里需要注意一下由于双飞翼布局会一直随着浏览器可视区域宽度减小从而不断挤压中间部分宽度。

<!-- 双飞翼布局 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .header,
        .footer {
            height: 100px;
            line-height: 100px;
            background-color: green;
            text-align: center;
            font-size: 30px;
            font-weight: bolder;
        }
        .container {
            overflow: hidden;
        }
        .left,
        .middle,
        .right {
            float: left;
            min-height: 130px;

        }
        .left {
            margin-left: -100%;
            width: 200px;
            background-color: red;
        }
        .right {
            margin-left: -200px;
            width: 200px;
            background-color: rgb(209, 165, 46);
        }
        .middle {
            width: 100%;
            height: 100%;
            background-color: blue;
        }
        .inner {
            margin: 0 200px 0 200px;
            min-height: 130px;
            background-color: hotpink;
        }
    </style>
</head>
<body>
    <div class="header">Header</div>
    <div class="container">
        <div class="middle">
            <div class="inner">
                <p>middle middlemiddle</p>
               
            </div>
        </div>
        <div class="left">
            <p>left left left</p>
        </div>
        <div class="right">
            <p>right right right</p>
        </div>
    </div>
    <div class="footer">footer</div>
</body>
</html>

RDSunday

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
双飞翼布局

双飞翼布局双飞翼布局和圣杯布局很类似，不过是在middle的div里又插入一个div，通过调整内部div的margin值，实现中间栏自适应，内容写到内部div中。这样可以先做好主体部分，然后再将附属部分放到合适的位置！双飞翼布局增加了一个div,widht=100%,height=100%div用margin 0 rightWidth 0 leftWidth,来实现自适应没有用到p...
复制链接

扫一扫