圣杯布局，双飞翼布局

最新推荐文章于 2023-05-08 10:10:46 发布

HS_NOTE

最新推荐文章于 2023-05-08 10:10:46 发布

阅读量121

点赞数 1

本文链接：https://blog.csdn.net/HS_NOTE/article/details/105497040

版权

简介

圣杯布局和双飞翼布局达到的效果基本相同，都是侧边两栏宽度固定，中间栏宽度自适应。主要的不同之处就是在解决中间部分被挡住的问题时，采取的解决办法不一样，圣杯布局是在父元素上设置了padding-left和padding-right，在给左右两边的内容设置position为relative，通过左移和右移来使得左右两边的内容得以很好的展现，而双飞翼则是在center这个div中再加了一个div来放置内容，在给这个新的div设置margin-left和margin-right 。

效果图

在这里插入图片描述

flex实现圣杯布局

<style>
          *{
            margin: 0;
            padding: 0;
            text-align: center;
        }
        html,body{
            height: 100%;
        }
        #container{
            display: flex;
            flex-flow: column;
            height: 100%;
        }
        #header,#footer{
            flex: 0 0 100px;
            background-color: darkorchid;
        }
        #main{
            flex: 1;
            display: flex;
        }
        #left,#right{
            flex: 0 0 100px;
            background-color: darkturquoise;
        }
        #center{
            flex: 1;
            background-color: deeppink;
        }
    </style>
    <body>
    <div id="container">
        <div id="header"><h1>头部</h1></div>
        <div id="main">
            <div id="left"><h1>左部</h1></div>
            <div id="center"><h1>中部</h1></div>
            <div id="right"><h1>右部</h1></div>
        </div>
        <div id="footer"><h1>尾部</h1></div>
    </div>
</body>

margin负值实现

<style>
    *{
        margin: 0;
        padding: 0;
    }
    #container{
        height: 400px;
        margin-top: 50px;
    }
    #center{
        float: left;
        
        width: 100%;
        background-color: hotpink;
    }
    #content{
        height: 400px;
        margin-left: 200px;
        margin-right: 250px;
        background-color: mediumblue;
    }
    #left{
        float: left;
        height: 300px;
        width: 200px;
        margin-left: -100%;
        background-color: rgb(184, 27, 137);
    }
    #right{
        float: left;
        height: 300px;
        width: 250px;
        background-color: lawngreen;
        margin-left: -250px;
    }
</style>
<body>
    <div id="container">
        <div id="center">
            <div id="content">中部</div>
        </div>
        <div id="left">左部</div>
        <div id="right">右部</div>
    </div>
</body>

relative布局+margin负值实现

<style type="text/css">
	 	body{
	 		min-width: 500px;
	 	}
	 	*{
	 		margin:0;
	 		padding: 0;
	 	}
	 	.header , .footer{
	 		background: rgb(83, 228, 160);
	 		width: 100%;
	 	}
	 	.footer{
	 		clear: both;
	 	}
         .main{
         	height: 200px;
         	padding: 0 300px 0 200px;
         	background: greenyellow;
         	*zoom: 1;
         }
         .left , .center , .right{
         	float: left; 
         }
         .center{
         	width: 100%;
         	height: 220px;
         	background: red;
         }
         .left {
         	width: 200px;
         	height: 200px;
         	background: yellow;
         	margin-left: -100%;
             position: relative;
         	left: -200px;
         }
         .right{
         	width: 300px;
         	height: 200px;
         	background: gainsboro;
         	margin-left: -300px;
         	position: relative;
         	left: 300px;
         }
	 </style>
	<body>
		
	<div class="header">
             头部
	</div>
	<div class="main">
		<div class="center">中间</div>
		<div class="left">左边</div>
		<div class="right">右边</div>
	</div>
	<div class="footer">
		底部
	</div>
	</body>