css回顾之左侧宽度自适应布局

目标:

![屏幕快照 2018-03-13 上午11.36.06](http://ozfuwp2os.bkt.clouddn.com/屏幕快照 2018-03-13 上午11.36.06.png)

<!DOCTYPE html>
<meta charset=utf-8>
<html>
<head>
<title>alibaba</title>
<style type="text/css">
.main{
margin: 5px;
overflow: hidden;
/* border: 1px solid #000;*/
}
.column{
border: 1px solid #000;
}
.left{
float: left;
width: 100%;
}
.right{
float: left;
width: 200px;
margin-left: -204px;
}
.real{
margin-right: 210px;
border: 1px solid blue;
height: 300px;
}
</style>
</head>
<body>
<div class="main">
<div class="left column">
<div class="real">content - 自适应宽度</div>
</div>
<dis class="right column">aside - 定宽200px</div>
</div>
</body>
</html>

第一步:两个div设置固定高度右边的设置固定宽度,并且都float:left;

第二步:右边的div设置固margin-right,让它能和左边的div并排显示;

第三步:在左边的div中再添加一个小div#real,由它来撑开div#left 设置margin-right,值为div#right的宽

主要思想——借鉴双飞翼布局!

上一篇:初识C#接口


下一篇:用Dagger2在Android中实现依赖注入