右边固定宽度左边自适应宽度的两列布局方法
- >
- <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>菜单1p>
- <p>菜单2p>
- <p>菜单3p>
- <p>菜单4p>
- div>
- div>
- body>
- html>
以上代码的关键技术部分可以表述为：将一个宽度为100%的div的外边距（left-margin or right-margin）设置为某个负值，然后将其第一个子div的外边距（与父容器的边距同方向）设置为对应的正值，那么这个div就可以浮动并且自适应浏览器宽度。