圣杯布局padding-自适应窗口

最新推荐文章于 2024-04-16 14:44:31 发布

原创最新推荐文章于 2024-04-16 14:44:31 发布 · 286 阅读

1 ·

CC 4.0 BY-SA版权

本文详细介绍了如何使用CSS实现三栏布局，包括左侧固定宽度的红色导航栏、右侧固定宽度的绿色导航栏以及中间自适应蓝色主要内容区域。通过巧妙地利用padding、margin、float和position属性，实现了左右导航栏与中间内容区的完美结合。

效果：

css部分：

			*{
				padding: 0px;
				margin: 0px;
			}
			.outer{
				/*空出左右两边,做不变的导航栏效果*/
				padding-left: 100px;
				padding-right: 200px;
			}
			.left{
				width: 100px;
				height: 200px;
				background-color: red;
				float: left;/*占行元素的内容*/
				margin-left: -100%;/*使得111111部分到达middle的左边*/
				position: relative;
				left: -100px;/*使得111111脱离middle,到达左空白处*/
			}
			.right{
				width: 200px;
				height: 200px;
				background-color: green;
				float: left;
				margin-left: -200px;/*使得222222部分到达middle的右边*/
				position: relative;
				right: -200px;/*使得2222222脱离middle,到达右空白处*/
			}
			.middle{
				height: 400px;
				width: 100%;
				background-color: blue;
				float: left;
			}

HTML部分：

		<div class="outer">
			<!--要注意结构，中间部分放在最前边-->
			<div class="middle">22222222222</div>
			<div class="left">111111111</div>
			<div class="right">33333333333</div>
			XXXXXXXXXXXXXXXXXXXXXXX
		</div>