两/三栏布局(圣杯双飞翼)

最新推荐文章于 2024-07-18 18:43:34 发布

xingyunwei1

最新推荐文章于 2024-07-18 18:43:34 发布

阅读量89

点赞数

文章标签： html5 html css

本文链接：https://blog.csdn.net/xingyunwei1/article/details/120188330

版权

常用的页面布局（两栏布局、三栏（圣杯、双飞翼）布局）

1. 两栏布局,左边定宽，右边自适应

//html
<div id="left">左边定宽</div>
<div id="right">右边自适应,前端前端前端前端前端前端前端前端前端前端</div>

左边左浮动，右边加oveflow:hidden;变成BFC清除左侧浮动元素的影响

 #left{
    float: left;
    width: 200px;
    background: green;
}
#right{
    overflow: hidden;
    background: red;
}

2. 三栏布局,圣杯布局、双飞翼布局

圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局

圣杯布局

<html>
<head>
    <title>圣杯布局</title>
    <meta charset="utf-8">
    <style>
        header{
            width: 100%;
            height: 40px;
            background-color: darkseagreen;
        }
        #container{
            height:200px;
            padding: 0px 120px 0 140px;/*腾出宽度,即让main中的内容不会被左右的部分覆盖*/
            background:green;
        }
 
        #main{
            height:200px;
            width: 100%;
            position: relative;
            background:orange;
            float:left;
        }
        #left{
            height:200px;
            width: 140px;
            margin-left: -100%;/*将left层拉回main层所在高度区域*/
            left: -140px;/*调整位置*/
            position: relative;
            background:blue;
            float:left;
        }
        #right{
            height:200px;
            width: 120px;
            margin-left: -120px;/*将right层拉回main层所在高度区域*/
            right: -120px;/*调整位置*/
            position: relative;
            background:yellow;
            float:left;
        }
        footer{
            width: 100%;
            height: 30px;
            background-color: darkslategray;
        }
    </style>
</head>
<body>
<header>header</header>
<div id="container">
    <div id="main">main</div>
    <div id="left">left</div>
    <div id="right">right</div>
</div>
<footer>footer</footer>
</body>
</html>

双飞翼布局

<html>
<head>
    <title>三栏布局</title>
    <meta charset="utf-8">
    <style>
        header{
            width: 100%;
            height: 40px;
            background-color: darkseagreen;
        }
        #main{
            width: 100%;
            height:200px;
            position: relative;
            float:left;
        }
        #main-inner{
            margin:0 120px 0 140px;/*让main的内容不被左右的内容覆盖*/
            background:red;
            height:100%;
        }
        #left{
            width: 140px;
            height:200px;
            margin-left: -100%;/*将left层拉回main层所在高度区域*/
            background:blue;
            float:left;
        }
        #right{
            width: 120px;
            height:200px;
            margin-left: -120px;/*将right层拉回main层所在高度区域*/
            background:yellow;
            float:left;
        }
        footer{
            width: 100%;
            height: 30px;
            background-color: darkslategray;
            clear:both;/*避免因前面的元素浮动而上浮*/
        }
    </style>
</head>
<body>
<header>header</header>
 
<div id="main">
    <div id="main-inner">min-inner</div>
</div>
<div id="left">left</div>
<div id="right">right</div>
 
<footer>footer</footer>
</body>
</html>

xingyunwei1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
两/三栏布局(圣杯双飞翼)

常用的页面布局（两栏布局、三栏（圣杯、双飞翼）布局）1. 两栏布局,左边定宽，右边自适应//html<div id="left">左边定宽</div><div id="right">右边自适应,前端前端前端前端前端前端前端前端前端前端</div>左边左浮动，右边加oveflow:hidden;变成BFC清除左侧浮动元素的影响 #left{ float: left; width: 200px; backgr...
复制链接

扫一扫