css两栏布局
2017-06-23 本文已影响0人
鸭梨山大哎
实现左侧固定，右侧自适应。
思路，布局最关键的是让block元素并排排列，简单用float就行。之后就是画两个矩形就好，也就是写两个width和height。
<!DOCTYPE html>
<style>
html,body{
height: 100%;/*高度百分百显示*/
}
#left{
width: 300px;
height: 100%;/*高度一定要设置，因为布局就一个矩形嘛，两条边都不说怎么画矩形*/
background-color: #ccc;
float: left;/* float很重要，否则block元素没法并排排列*/
}
#right{
height:100%;
margin-left: 200px;
background-color: pink;
}
</style>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS布局</title>
</head>
<body>
<div id="left"></div>
<div id="right"></div>
</body>
</html>
