本文主要是介绍实现一个自适应布局 两列布局，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
实现一个自适应布局--网易课堂
<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>这篇关于实现一个自适应布局 两列布局的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
