右邊固定寬度左邊自適應寬度的兩列布局方法 - zuowj－IT工程師數位筆記本

文章出處

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>一邊固定寬度和一邊自適應寬度的布局</title>
<style type="text/css">
body {
padding: 0;
margin: 0;
}
#wrapper {
width: 960px;
border: 1px solid #333;
margin: 0 auto;
}
#nav {
width: 200px;
float: right;
}
#content-wrapper {
margin-right: -200px;
float: left;
width: 100%;
}
#content {
margin-right: 200px;
padding: 0 10px;
}
.clearfix:after {
height: 0;
content: ".";
display: block;
clear: both;
visibility: hidden;
}
</style>
</head>
<body>
<div id="wrapper" class="clearfix">
<div id="content-wrapper">
<div id="content">
<p>
2010年11月末經濟適用房開發貸款。
</p>
</div>
</div>
<div id="nav">
<p>菜單1</p>
<p>菜單2</p>
<p>菜單3</p>
<p>菜單4</p>
</div>
</div>
</body>
</html>