- 固定宽度的布局
- 流式布局
- 弹性布局
固定宽度的两列布局：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>两列布局</title>
<style type='text/css'>
.wrapper {
margin: 0;
padding: 0;
960;
}
#left {
670px;
float: left;
background: green;
height: 300px;
overflow: hidden;
}
#right {
230px;
float: left;
background: red;
height: 300px;
overflow: hidden;
}
</style>
</head>
<body>
<div id="wrapper">
</div>
<div id="left">
</div>
<div id="right">
</div>
</body>
</html>
流式两列布局：
将容器宽度设为窗口宽度的百分数，流式布局能够相对于浏览器进行伸缩
#left { width: 25%; float: left; background: green; height: 300px; overflow: hidden; } #right { width: 72.82%; float: left; background: red; height: 300px; overflow: hidden; }
弹性布局：用em为单位设置元素宽度，可以确保在字号增大时整个布局随之增大