两列布局、多列布局

两列布局

用css、html编写一个两列布局的网页，要求右侧宽度为200px，左侧自动扩展

<div class = 'container'>
	<div class = 'left'></div>
	<div class = 'right'></div>
</div>

1. 利用浮动float+margin

	*{
			margin: 0
			padding: 0;
		}
		.container{
			overflow: hidden;
		}
		.left{
			float: right;
			width: 200px;
			height: 200px;
			background: red;
		}
		.right{
			margin-right: 200px;
			background: blue;
			height: 200px;
		}

2. 利用弹性盒子来写

	*{
			padding: 0;
			margin: 0;
		}
		.container{
			display: flex;
		}
		.left{
			flex-grow: 1；
			//将外部盒子的剩余部分给左边盒子
			height: 200px;
			background: red;
		}
		.right{
			width: 200px;
			height: 200px;
			background: blue;
		}

3. 利用定位position+margin

	*{
			padding: 0;
			margin: 0;
		}
		.container{
			position: relative;
		}
		.left{
			height: 200px;
			margin-right: 200px; 
			background: red;
		}
		.right{
			position: absolute;
			right: 0;
			top: 0;
			width:200px;
			height: 200px;
			background: blue;
		}

多列布局

用css、html编写一个三列布局的网页，要求左右侧宽度为200px，中间自动扩展

<div class = 'container'>
	<div class = 'left'></div>
	<div class='mid'></div>
	<div class = 'right'></div>
</div>

1、position+margin（两侧定宽，中间自适应）

	*{
			padding: 0;
			margin: 0;
		}
		.container {
    		position: relative;
		}
		.left{
		    position: absolute;
		    left: 0px;
		    top: 0px;
		    width: 200px;
		    height: 200px;
		    background: red;
		}
		.right {
		    position: absolute;
		    right: 0px;
		    top: 0px;
		    height: 200px;
			background: blue;
		    width: 200px;
		}
		.mid {
		    margin: 0 200px;
		    height: 200px;
		    background: yellow;
		}

2、flex（两侧定宽，中间自适应）

*{
			padding: 0;
			margin: 0;
		}
		.container {
    		display: flex;
		}
		.left{
			width: 200px;
			height: 200px;
		    background: red;
		}
		.right {
			width: 200px;
			height: 200px;
		    background: blue;

		    
		}
		.mid {
			height: 200px;
			flex-grow: 1;
		    background: yellow;
		}