双飞翼布局

最新推荐文章于 2024-06-01 23:21:16 发布

十友九

最新推荐文章于 2024-06-01 23:21:16 发布

阅读量103

点赞数

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/weixin_43778556/article/details/106150986

版权

HTML 专栏收录该内容

41 篇文章 1 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双飞翼布局</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        ul,ol{
            list-style: none;
        }
        a{
            text-decoration: none;
            color: #000000;
        }
        /*双飞翼布局*/
    /*    左右两侧盒子宽度固定值，中间盒子宽度自适应*/
    /*    浮动：mg相对于上一个浮动元素位置偏移*/
        .container{
            /*左浮动 宽度通栏*/
            width: 100%;
            float: left;
            height: 400px;
            background-color: #eeeeee;
        }
        .container .main{
            /*标准流*/
            /*比设置宽度的盒子margain占有位置 利用mg将左右两个盒子的位置挤出来*/
            margin: 0 210px;
            height: 400px;
            background-color: green;
        }
        .left{
            float: left;
            width: 200px;
            height: 400px;
            background-color: orange;
            /*利用margain-left负值将盒子移动到container最左侧，拉回一个屏幕的宽度*/
            margin-left: -100%;
        }
        .right{
            float: left;
            width: 200px;
            height: 400px;
            background-color: red;
            /*right元素在container最右侧，拉回自身宽度*/
            margin-left: -200px;
        }


    </style>
</head>
<body>
<!--    三个同级元素浮动-->
    <div class="container">
<!--        宽度自适应盒子 标准流-->
        <div class="main">自适应</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</body>
</html>