实现一个自适应布局两列布局

来源：互联网发布：java finalize作用编辑：程序博客网时间：2024/06/15 22:55

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

<img src="http://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>

0 0

实现一个自适应布局 两列布局

实现一个自适应布局两列布局