css

最新推荐文章于 2024-05-31 17:42:47 发布

饼干ヾ

最新推荐文章于 2024-05-31 17:42:47 发布

阅读量239

点赞数

分类专栏：总结文章标签： css

本文链接：https://blog.csdn.net/qq_45703928/article/details/104044817

版权

总结专栏收录该内容

13 篇文章 0 订阅

订阅专栏

css实现两栏布局

float布局
绝对定位
flex布局

float布局

<body>
  <div class="left">定宽</div>
  <div class="right">自适应</div>
</body>
<style>
	.left{
	  width: 200px;
	  height: 600px;
	  background: red;
	  float: left;
	  display: table;
	  text-align: center;
	  line-height: 600px;
	  color: #fff;
	}
	
	.right{
	  margin-left: 210px;
	  height: 600px;
	  background: yellow;
	  text-align: center;
	  line-height: 600px;
	}
</style>

绝对定位

<body>
<div id = "main"></div>
<div id = "aside"></div>
</body>

<style> 
	#aside{
	position:absolute;
	left:0;
	width:200px;
	}
	#main{
	margin-left:200px;
	}
</style>

flex布局

<div id="container">
<div id="aside"></div>
<div id="main"></div>
</div>


 <style>
	#container{
	display:flex;
	}
	
	#aside{
	flex:0 0 200px;
	}
	
	#main{
	flex: 1 1;
	}
</style>