三列布局

方法一:flex

<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			.container{
				display: flex;
				min-height: 300px;
			}
			.main{
				flex-grow: 1;/* //flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。 */
				background-color: #5F9EA0;
			}
			.left{
				order: -1;/* //order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。 */
				flex-basis: 200px;
				background-color: #FAEBD7;
			}
			.right{
				flex-basis: 300px;
				/* //flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。
				//浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。 */
				background-color: #7FFFD4;
			}
		</style>
	</head>

	<body>
		<div class="container clearfix">
			<div class="main">main</div>
			<div class="left">left</div>
			<div class="right">right</div>
		</div>
	</body>

方法二:float+margin

<style type="text/css">
			/* 不考虑主体middle一定要放在最前面进行渲染
            1、使用float+margin */
			/*float布局,注意中间的middle不要设为width:100%,否则右边的margin会被挤到视窗外面,div元素本身默认是占满整个父元素的宽度的,
			如果设了margin或者padding就会自动缩小width让出margin和padding的空间*/
	.left-01 {
		float: left;
		background-color: red;
		width: 150px;
		height: 50px;
	}

	.right-01 {
		float: right;
		background-color: yellow;
		width: 200px;
		height: 50px;
	}

	.middle-01 {
		margin: 0 200px 0 150px;
		background-color: #fff9ca;
		height: 50px;
	}
		</style>
	</head>

	<body>

		<div>
			<div class="left-01"><span>div-left</span></div>
			<div class="right-01"><span>div-right</span></div>
			<!--根据float对后面元素的影响,主元素要放在文档流最后-->
			<div class="middle-01"><span>div-middle</span></div>
		</div>
	</body>

方法三:使用BFC原理,将middle设为overflow: hidden;

.left-01 {
	float: left;
	background-color: red;
	width: 150px;
	height: 50px;
}

.right-01 {
	float: right;
	background-color: yellow;
	width: 200px;
	height: 50px;
}

.middle-01 {
	overflow: hidden;
	background-color: #fff9ca;
	height: 50px;
}

方法四:圣杯布局

<style type="text/css">
			/* 二、主体middle一定要放在最前面进行渲染,使用圣杯/双飞翼 圣杯布局和双飞翼布局解决问题的方案在前一半是相同的,
			也就是三栏全部float浮动,但左右两栏加上负margin让其跟中间栏div并排,以形成三栏布局。 
			不同在于解决”中间栏div内容不被遮挡“问题的思路不一样:
			圣杯布局,为了中间div内容不被遮挡,将中间div设置了左右padding-left和padding-right后,
			将左右两个div用相对布局position: relative并分别配合right和left属性,
			 以便左右两栏div移动后不遮挡中间div。 双飞翼布局,为了中间div内容不被遮挡,直接在中间div内部创建子div用于放置内容,
			 在该子div里用margin-left和margin-right为左右两栏div留出位置。 多了1个div,少用大致4个css属性
			(圣杯布局中间divpadding-left和padding-right这2个属性,加上左右两个div用相对布局position: relative及对应的right和left共4个属性,一共6个;
			 而双飞翼布局子div里用margin-left和margin-right共2个属性,6-2=4),个人感觉比圣杯布局思路更直接和简洁一点。 */
			* {
				margin: 0;
				padding: 0;
			}

			.clearfix:after {
				content: '';
				display: block;
				clear: both;
			}

			/* .main,.left,.right{
				position: relative;
				min-height: 130px;
				float: left;
			}
			.left{
				width: 200px;
				margin-left: -100%;
				left: -200px;
				background-color: aquamarine;
			}
			.right{
				width: 300px;
				margin-left:-300px ;
				right: -300px;
				background-color: #FAEBD7;
			}
			.main{
				width: 100%;
				background-color: cadetblue;
			}
			.container{
				padding: 0 300px 0 200px;
			} */
			.container {
				padding: 0 310px 0 210px;
			}

			.main,
			.left,
			.right {
				position: relative;
				float: left;
				height: 300px;
			}

			.main {
				width: 100%;
				background-color: #FAEBD7;
			}

			.left {
				width: 200px;
				margin-left: -100%;
				left: -210px;
				background-color: aquamarine;
			}

			.right {
				width: 300px;
				margin-left: -300px;
				right: -310px;
				background-color: cadetblue;
			}
		</style>
	</head>

	<body>
		<div class="container clearfix">
			<div class="main">main</div>
			<div class="left">left</div>
			<div class="right">right</div>
		</div>
	</body>

方法五:双飞翼模式

<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			.clearfix:after {
				content: '';
				display: block;
				clear: both;
			}
			.main, .left, .right{
				min-height: 300px;
				float: left;
				text-align: center;
			}
			.left{
				margin-left: -100%;
				width: 200px;
				background-color: #5F9EA0;
			}
			.right{
				margin-left: -300px;
				width: 300px;
				background-color: #FAEBD7;
			}
			.main{
				width: 100%;
				background-color: #7FFFD4;
			}
			.content{
				margin: 0 300px 0 200px;
			}
		</style>
	</head>

	<body>
		<div class="container clearfix">
			<div class="main">
				<div class="content">main</div>
			</div>
			<div class="left">left</div>
			<div class="right">right</div>
		</div>
	</body>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值