您的位置：首页 > Web前端 > CSS

css布局小技巧---1：有一侧宽度固定，另一侧随浏览器及分辨率改变而改变的css页面布局

2007-05-21 15:06 615 查看

若要让页面随着浏览器窗口，分辨率的改变而改变，并且左侧或者右侧有一列固定宽度的文本，就如百度搜索结果页面，左侧是搜索内容，右侧是广告内容。要实现这种效果，

1 可以用绝对定位。（这种方式的坏处是若绝对定位的内容高度大于另外一侧内容告诉，则绝对定位的部分会覆盖下面的文字，若有通栏的尾文件就麻烦了，如下例子:)

如：

<style type="text/css">

</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">

</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;} 也可以达到这样的效果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css 浏览器 class div float border

相关文章推荐

新的分享

章节导航