圣杯、双飞翼布局

最新推荐文章于 2024-10-09 19:18:32 发布

微星星

最新推荐文章于 2024-10-09 19:18:32 发布

阅读量76

点赞数

分类专栏： css 文章标签： css html flex

本文链接：https://blog.csdn.net/weixin_38930658/article/details/114578332

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

圣杯、双飞翼布局

圣杯

圣杯

圣杯布局

对于margin-left：-100px
margin中左、上以其他为基准点，自己位置移动
margin中右，下以自己为基准点，其他元素位置移动

// A code block
var foo = 'bar';

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圣杯(runoob.com)</title>
	<style>
	#container{
		padding:0 200px;
		background-color:yellow;
	}
    #center{
	background-color:green;
		width:100%;
		}
	#left{
		background-color:red;
		width:200px;
		margin-left:-100%;
		left:-200px;
		}
		#right{
			background-color:blue;
			width:200px;
			margin-left:-200px;
			left:200px; 
			#right:-200px;//可替代left200px;		
			#margin-right：-200px //可替代 margin-left：-200px；right：-200px
		}
		.column{
			position:relative;
			float:left;
		}
	</style>
</head>
<body>
	<div id="container">
		<div id="center" class="column">中间</div>
		<div id="left" class="column">左边</div>
		<div id="right" class="column">右边</div>
	</div>
</body>
</html>

分析：分为header，footer，content（内容区域），其中内容区域需要左/右/中站一行，所以需要浮动，但是浮动footer就会上去，需要去除浮动，内容中间部分需要填满，所以要用width：100%，为了不让左右占据它的内容，所以需要父框加那边距padding，left需要margin-left：100%移动到左边，再设置position：relative ，left：-100px右边同理

.center,.left,.right{
      float:left;
    }
    /* 去除浮动 */
    .clearfix::after{
      content:"";
      display: block; 
      clear:both;
    }
    .wrapper{
      padding: 0 100px;
    }
    .center{
      width:100%;
    }
    .left{
      width:100px;
      margin-left: -100%;
      position: relative;
      left:-100px;
    }
    .right{
      width:100px;
      margin-left:-100px;
      position: relative;
      right:-100px;
    }
  </style>
</head>
<body>
  <header>头部</header>
  <div class="clearfix wrapper">
    <div class="center" style="background-color: green;">主区域</div>
    <div class="left" style="background-color: blue;">左区域</div>
    <div class="right" style="background-color: crimson;">右区域</div>
  </div>
  <footer>底部</footer>
</body>

双飞燕布局

下面展示一些 内联代码片。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
	<style>
		#contain{
			width:100%;
			background-color:yellow;
		}
		#center{
			background-color:green;
			margin-left:200px;
			margin-right:150px;
		}
		#left{
			background-color:pink;
			width:200px;
			margin-left:-100%;
		}
		#right{
			background-color:blue;
			width:150px;
			margin-left:-150px;
		}
		.column{
			float:left;
		}
	</style>
</head>
<body>
	<div id="contain" class="column">
		<div id="center">中间</div>
	</div>
	<div id="left" class="column">左边</div>
	<div id="right" class="column">右边</div>
</body>
</html>

flex布局

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
	<style>
		#container{
			display:flex;
		}
		#center{
		flex:1;
			background:red;
		}
		#left{
			flex:0 0 200px;
			background:blue;
		}
		#right{
			flex:0 0 150px;
			background:yellow;
		}
	</style>
</head>
<body>
	<div id="container">
		
		<div id="left">左边</div>
		<div id="center">中间</div>
		<div id="right">右边</div>
	</div>
</body>
</html>

定位布局

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
	<style>
		1html,
		1body{
		1	height:100%;
		1	overflow:hidden;
		1}
		.container{
			position:relative;
			height:100%;
			background-color:red;
		}
		.left,.right{
			position:absolute;
			top:0;
			width:200px;
			min-height:200px;
			background:lightblue;
		}
		.left{
			left:0;
		}
		.right{
		right:0;
		}
		.center{
		margin:0 200px;
			min-height:400px;
			background:lightsalmon;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="center" >中间</div>
		<div class="left" >左边</div>
		<div class="right" >右边</div>
	</div>
</body>
</html>