若要让页面随着浏览器窗口，分辨率的改变而改变，并且左侧或者右侧有一列固定宽度的文本，就如百度搜索结果页面，左侧是搜索内容，右侧是广告内容。要实现这种效果，
1 可以用绝对定位。（这种方式的坏处是若绝对定位的内容高度大于另外一侧内容告诉，则绝对定位的部分会覆盖下面的文字，若有通栏的尾文件就麻烦了，如下例子:)
如：
<style type="text/css">
<!--
body,td,th {
font-size: 12px; margin:0;
}
.left { width:200px; position:absolute; left:3px; background:#dfdfdf;
border:1px dashed #ccc;}
.right { margin-left:205px; background:#ffdddd; }
-->
</style></head>
<body>
<div class="left">
左侧固定宽度部分<br />
左侧固定宽度部分<br />
左侧固定宽度部分<br />
左侧固定宽度部分<br />
左侧固定宽度部分<br />
</div>
<div class="right">右侧随页面宽度右侧随页面宽度变化的部分右侧随页面宽度变化的部分右侧随页面宽度变化的部分右侧随页面宽度变化的部分右侧随页面宽度变化的部分右侧随页面宽度变化的部分<br /></div>
<div >底底底底底底底底底底底底底底底底底底底底底底底底底底底底底</div>
</body>
2 使用类或者id嵌套，仍用浮动属性定位，这样就没有了上面所说的缺点了 例子：
<style type="text/css">
<!--
body,td,th {
font-size: 12px; margin:0;
}
.bar { float:right; width:200px;}
.content { float:left; width:100%; margin-right:-201px;}
.contentIn { margin-right:200px;}
.footer { clear:both; border-top:1px solid #ccc;}
-->
</style></head>
<body>
<div class="bar">左侧固定宽度部分<br />左侧固定宽度部分<br />左侧固定宽度部分<br />左侧固定宽度部分<br />左侧固定宽度部分<br />左侧固定宽度部分<br />左侧固定宽度部分<br />左侧固定宽度部分<br /></div>
<div class="content">
<div class="contentIn">右侧随页面宽度变化的部分右侧随页面右侧随页面宽度变化的部分右侧随页面右侧随页面宽度变化的部分右侧随页面右侧随页面宽度变化的部分右侧随页面右侧随页面宽度变化的部分右侧随页面右侧随页面宽度变化的部分右侧随页面右侧随页面宽度变化的部分右侧随页面</div>
</div>
<div class="footer">底底底底底底底底底底底底底底底底底底底底底底底底底底底底底底底底底底底底底底底底底底底底底底</div>
</body>
另外，这种方式可以实现左右两侧中间有分隔竖线时，让竖线跟随两侧内容向下延伸，哪个内容多就随着哪个延伸，在bar跟contentIn上分别定义边框就可以了，这样就避免了把线定义在一侧，而这一侧内容又少时线延伸不到底的问题。
3 第三种可用bar {float:left; width:200px;} content {margin:0 0 0 210px;} 也可以达到这样的效果
1401
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
