圣杯布局

最新推荐文章于 2024-07-17 16:42:38 发布

Dseai_

最新推荐文章于 2024-07-17 16:42:38 发布

阅读量437

点赞数

CC 4.0 BY-SA版权

分类专栏： css3

本文链接：https://blog.csdn.net/Dseai_/article/details/71321863

css3 专栏收录该内容

8 篇文章

订阅专栏

<style type="text/css">
		body{
			box-sizing: border-box;
			min-width: 1000px;
		}
		#head{
			text-align: center;
			background-color: #CCCCFF;
		}
		#container{
			padding-left: 200px;
			padding-right: 200px;
			overflow: hidden;
		}


		#container .column{
			float: left;
			position: relative;
		}
		#center{
			text-align: center;
			background:#FFCC99;
			padding: 10px 30px;
			width: 100%;
			min-height: 280px;
			overflow: visible;
		}
		#left{
			text-align: center;
			width: 180px;
			margin-left: -100%;
			right: 260px; /*180+60(padding total)+30margin*/
			background: #99CCCC;
			padding: 0 10px;
			min-height: 300px;
		}
		#right{
			text-align: center;
			width: 150px;
			background-color: #FFCCCC;
			
			margin-right: -300px;/*fullwidth+center column padding尽量大一点，chrome浏览器下 这个div浮动不起来*/
			min-height: 300px;
		}
		#footer{
			text-align: center;
			background-color: #978f85;
			clear: both;
			margin-top: 0px;
		}
		h1{
			margin:0px;
		}
	</style>

<div id="head"><h1>head</h1></div>
	<div id="container">
		<div id="center" class="column">center</div>
		<div id="left" class="column">left</div>
		<div id="right" class="column">right</div>
	</div>
	<div id="footer"><h1>foot</h1></div>