css两栏布局

最新推荐文章于 2022-10-31 21:54:53 发布

张大晴

最新推荐文章于 2022-10-31 21:54:53 发布

阅读量170

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/zhangshab/article/details/79732031

版权

html 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

1.左边定宽，右边自适应

用负margin的方式实现

<style>
	.wrap{
		overflow:hidden;
	}
	.right-container{
		float:left;
		width: 100%;
	}
	.right{
		margin-left: 200px;
		background: red;
	}
	.left{
		width: 200px;
		float:left;
		margin-left: -100%;
		background:blue;
	}

  </style>

<body>
	<div class='wrap'>
		<div class='right-container'>
			<div  class='right'>right</div>	
		</div>
		<div  class='left'>left</div>
		
	</div>	
 </body>

2.右边定宽，左边自适应

<style>
	.wrap{
		overflow:hidden;
	}
	.left-container{
		float:left;
		width: 100%;
	}
	.left{
		background:red;
		margin-right: 200px;
	}
	.right{
		float:left;
		margin-left:-200px;
		width: 200px;
		background:yellow;
	}

  </style>

 <body>
	<div class='wrap'>
		<div class='left-container'>
			<div  class='left'>left</div>	
		</div>
		<div  class='right'>right</div>
		
	</div>	
 </body>

用弹性盒方式实现：

左边定宽，右边自适应

<style>
	.wrap{
		display:flex;
	}
	.left{
		background:red;
		width: 200px;
		
	}
	.right{
		flex:1;
		background:yellow;
	}

  </style>

 <body>
	<div class='wrap'>
		<div  class='left'>left</div>	
		<div  class='right'>right</div>
	</div>	
 </body>

右边定宽，左边自适应

<style>
	.wrap{
		display:flex;
	}
	.left{
		background:red;
		flex:1;
	}
	.right{
		width: 200px;
		background:yellow;
	}

  </style>
 <body>
	<div class='wrap'>
		<div  class='left'>left</div>	
		<div  class='right'>right</div>
	</div>	
 </body>