实现一个自适应布局两列布局_react中按两列排版-CSDN博客

本文链接：https://blog.csdn.net/u013217071/article/details/46482703

实现一个自适应布局--网易课堂

<img src="https://img-blog.csdn.net/20150615094052209?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMzIxNzA3MQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css-布局-自适应布局</title>
	<meta name="xiaowei" content="1464835043@qq.com">
	<style type="text/css">
		html,body{margin:0; padding:0; text-align:center;}
		.side{background-color:red;}
		.main{background-color:blue;}


		html,body{height:100%;}


		/*方法一*/   
	/*	.parent{height:100%;display:flex;flex:1;}
		.side{width:200px;}
		.main{margin-left:10px;flex:1;}*/




		/*方法二*/
		/*.parent{height:100%; }
		.side{width:200px; float:left; height:100%;}
		.main{margin-left:210px; height:100%;}*/


		/*清除浮动，后续元素不受浮动的影响*/
		.clearfix:after{content:".";display:block;clear:both;height:0;
		overflow:hidden;visibility:hidden;}


		/*方法三*/
		.parent{}
		.side{position:absolute; width:200px; height:100%;}
		.main{position:absolute; top:0; right:0; left:210px; bottom:0; height:100%;}
	</style>
	
</head>
<body>
	<div class="parent clearfix">
		<div class="side">侧栏</div>
		<div class="main">主栏</div>
	</div>
</body>
</html>