html5第七课时，双飞翼布局，理解注释！！

最新推荐文章于 2025-04-14 12:25:24 发布

甲戌天火

最新推荐文章于 2025-04-14 12:25:24 发布

阅读量376

点赞数 1

分类专栏： HTML5

本文链接：https://blog.youkuaiyun.com/qq_36872096/article/details/71055184

版权

HTML5 专栏收录该内容

78 篇文章

订阅专栏

本文详细介绍了双飞翼布局的实现原理与步骤。通过CSS浮动和负边距属性，实现了一个固定宽度的左右两侧栏与自适应中间内容区的布局方案。文章提供了完整的HTML和CSS代码示例，展示了如何确保在不同屏幕尺寸下保持良好的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>双飞翼布局</title>
    <style>
        #parent{
            width: 600px;
            height: 600px;
        }
        #main{
            height: 100%;
            width: 100%;
            color: white;
            background-color: #585858;
            text-align: center;


        }
        #left{
            height: 100%;
            width: 20%;
            background-color: #f2ad0a;
            color: white;
            /*这里的100%为main的宽度，
            相当于是把left给左移了，
            刚好实现左边与main的对齐。*/
            margin-left: -100%;
        }
        #right{
            height: 100%;
            width: 30%;
            background-color: red;
            color: white;
            /*这里的30%为right自身的宽度，
            相当于是自己向左移了自身的一个宽度，
            刚好实现右边与main的对齐。*/
            margin-left: -30%;
        }
        #right,#left,#main{
            float: left;
        }
        #mainln{
            margin: 0 20% 0 30%;
            /*左边及右边部分元素是会被left/right挡住的，
            还必须在main里面再添加一个div(class="mainIn")，
            设置margin:0 30% 0 20%;，把两边内容给挤开，这样才是完美的效果。*/
        }
    </style>
</head>
<body>
<div id="parent">
    <div id="main">
        main
        <div id="mainln"></div>
    </div>
    <div id="left">left</div>
    <div id="right">right</div>
</div>
</body>
</html>