首页 > 试题广场 >

三列布局 - 双飞翼布局

[编程题]三列布局 - 双飞翼布局
  • 热度指数:2737 时间限制:C/C++ 3秒,其他语言6秒 空间限制:C/C++ 256M,其他语言512M
  • 算法知识视频讲解
 双飞翼布局是在圣杯布局上做了优化,解决了圣杯布局中布局发生错乱的问题。核心思路是在圣杯布局的基础上,再在内容区添加一层新的盒子,该盒子通过外边距将内容与两边的浮动元素分隔开,实际上中心盒子是没有"padding"属性的。
首先给类名为"container"的盒子添加"overflow: hidden"属性,解决子浮动元素导致的高度塌陷问题。然后继续给类名为"left"的盒子添加"float: left"、"margin-left: -100%"和"width: 100px"。再给类名为"center"的盒子添加"float: left"和"width: 100%"属性,该盒子并没有像圣杯布局时添加"padding"属性那样。继续给类名为"right"的盒子添加"float: left"、"width: 100px"和"margin-left: -100px"。最后给类名为"main"的盒子添加"margin: 0px 100px",该属性为双飞翼布局的核心点,使用外边距将内容封锁在两边浮动元素的中间。
完成以上所讲的步骤即可通过测试。感谢您,再见。
啥年头了,谁还用这些老古董写法
发表于 2025-03-11 19:59:52 回复(0)
有没有前端工作过的佬知道,这玩意实际用的到吗?整的活越来越离谱了。
发表于 2023-11-28 15:17:51 回复(0)
 .container {
                overflow: hidden;
                border: 1px solid black;
            }
            .left {
                float: left;
                margin-left: -100%;
                width: 100px;
                background-color: greenyellow;
            }
            .center {
                float: left;
                width: 100%;
            }
            .main {
                margin: 0px 100px;
                background-color: darkorange;
            }
            .right {
                float: left;
                width: 100px;
                margin-left: -100px;
                background-color: darkgreen;
            }

发表于 2023-02-14 20:22:09 回复(0)
艹 完全一样,为什么就是过不去!!!
<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            .container {
                overflow: hidden;
                border: 1px solid black;
            }
            .left {
                float:left;
                margin-left:-100%;
                width:100px;
                background-color: greenyellow;
            }
            .center {
                float:left;
                width:100%;
            }
            .main {
                margin:0 100px;
                background-color: darkorange;
            }
            .right {
                float:left;
                width: 100px;
                margin-left:-100px
                background-color: darkgreen;
            }
        </style>
    </head>
    <body>
        <section class="container">
            <article class="center"><main class="main"><br /><br /><br /></main></article>
            <article class="left"><br /><br /><br /></article>
            <article class="right"><br /><br /><br /></article>
        </section>
    </body>
</html>
发表于 2022-06-13 10:59:14 回复(0)
        .container {
            overflow: hidden;
            border: 1px solid black;
        }

        .left {
            float: left;
            margin-left: -100%;
            width: 100px;
            background-color: greenyellow;
        }

        .center{
            float: left;
            width: 100%;
        }

        .main {
            margin: 0px 100px;
            background-color: darkorange;
        }

        .right {
            float: left;
            width: 100px;
            margin-left: -100px;
            background-color: darkgreen;
        }

发表于 2022-04-21 10:01:16 回复(0)
.container {
    overflow:hidden;
    border: 1px solid black;
}
.left {
    float:left;
    margin-left:-100%;
    width:100px;
    background-color: greenyellow;
}
.center{
    float:left;
    width:100%;
}
.main {
    margin:0px 100px;
    background-color: darkorange;
}
.right {
    float:left;
    margin-left:-100px;
    width:100px;
    background-color: darkgreen;
}

发表于 2021-12-22 10:22:29 回复(0)

问题信息

CSS
难度:
6条回答 437浏览

热门推荐

通过挑战的用户

查看代码
三列布局 - 双飞翼布局