CSS布局——两栏布局

题外话：心情不好想虐虐自己。

两栏布局要求说明：左侧固定宽度，右侧自适应大小

HTML文档结构如下：

<body>
	<div class="outer">
		<div calss="inner left">这是左边</div>
		<div class="inner right">这是右边</div>
	</div>
</body>

实现效果：

方法如下：

方法一：float。left将元素的float属性设置为left

body{
 margin:0;
	padding:0;
	/*height:100%;*/
	background:#DCDCDC;
}
.left{
	width:500px;
	height:500px;
	background:#ADFF2F;
	float:left;
}
.right{
	/*height:100%;*/ /*高度自适应*/
	/*margin-left:500px;*/
	height:300px;
	background:#FF69B4;
} margin:0;
	padding:0;
	/*height:100%;*/
	background:#DCDCDC;
}
.left{
	width:500px;
	height:500px;
	background:#ADFF2F;
	float:left;
}
.right{
	/*height:100%;*/ /*高度自适应*/
	/*margin-left:500px;*/
	height:300px;
	background:#FF69B4;
}

方法二：float+margin-left。设置左元素float属性为left，有元素的margin-left为左元素的width

扫描二维码关注公众号，回复： 3354130 查看本文章

body{
	margin:0;
	padding:0;
	background:#DCDCDC;
}
.left{
	width:500px;
	height:500px;
	background:#ADFF2F;
	float:left;
}
.right{
	height:300px;
	margin-left:500px;
	background:#FF69B4;
}

方法三：float+overflow：hidden。左元素float属性设置为left，右元素overflow属性设置为hidden

body{
	margin:0;
	padding:0;
	background:#DCDCDC;
}
.left{
	width:500px;
	height:500px;
	background:#ADFF2F;
	float:left;
}
.right{
	height:300px;
	overflow:hidden;
	background:#FF69B4;
}

方法四：padding+绝对定位。左元素position属性设置为absolute，右元素padding-left设置为左元素的width：

body{
	margin:0;
	padding:0;
	background:#DCDCDC;
}
.left{
	width:500px;
	height:500px;
	background:#ADFF2F;
	position:absolute;
 }
.right{
	height:300px;
	padding-left:500px;
	background:#FF69B4;
} }
.right{
	height:300px;
	padding-left:500px;
	background:#FF69B4;
}

总结：

（1）上述大部分的方法都是创建BFC来解决问题的。在BFC中，每个盒子的左外边框紧挨着包含块的右边框。当我们给右侧的元素单独创建一个BFC时，它将不会紧贴在包含块的左边框，而是紧贴在左元素的右边框。

（2）创建BFC的方法：

a.float属性不为none

b.position属性为绝对属性absolute或fixed

c.overflow属性不为visible

d.display属性为inline-block，table-caption，flex，inline-flex

CSS布局——两栏布局

猜你喜欢