双飞翼布局（一般用于PC端网页布局）

最新推荐文章于 2022-12-29 23:01:32 发布

落花流雨

最新推荐文章于 2022-12-29 23:01:32 发布

阅读量224

点赞数

分类专栏：其他文章标签： css

本文链接：https://blog.csdn.net/weixin_44666644/article/details/113694400

版权

其他专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1. 布局目的

两侧内容宽度固定，中间内容宽度自适应
三栏布局，中间一栏最先加载、渲染出来（主要内容）

2. 实现方法：float + margin

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双飞翼布局</title>
    <style>
        div {
            text-align: center;
        }

        #main {
            background-color: #ddd;
            width: 100%;
        }

        /* 
            留出左边和右边的距离
            margin-left: 100px;  和 left宽度一样
            margin-right: 50px;  和 right宽度一样
         */
        #main #main-wrapper {
            margin-left: 100px;
            margin-right: 50px;
        }

        /* 
           margin-left: -100%;  这里的100%是指main的宽度
         */
        #left {
            background-color: orange;
            width: 100px;
            margin-left: -100%;
        }

        #right {
            background-color: green;
            width: 50px;
            margin-left: -50px;
        }

        .column {
            float: left;
        }
    </style>
</head>

<body>
    <h1>实现双飞翼布局</h1>
    <div id="main" class="column">
        <div id="main-wrapper">Main</div>
    </div>
    <div id="left" class="column">Left</div>
    <div id="right" class="column">Right</div>
</body>

</html>

落花流雨

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
双飞翼布局（一般用于PC端网页布局）

双飞翼布局（一般用于PC端网页布局）1. 布局目的两侧内容宽度固定，中间内容宽度自适应三栏布局，中间一栏最先加载、渲染出来（主要内容）2. 实现方法：float + margin<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc
复制链接

扫一扫