分类目录归档:CSS

老生长谈:css实现右侧固定宽度,左侧宽度自适应

反过来也可以:左侧宽度固定,右侧自适应。不管是左是右,反正就是一边宽度固定,一边宽度自适应。

这种布局比较常见,博客园很多默认主题就是这种。一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域是主体内容区——相信把侧边栏搞成自适应的人很少吧?

要实现这种布局,也算比较简单。我们先给出html结构:

1
2
3
4
5
<div id="wrap">
  <div id="sidebar" style="height:240px;">固定宽度区</div>
  <div id="content" style="height:340px;">自适应区</div>
</div>
<div id="footer">后面的一个DIV,以确保前面的定位不会导致后面的变形</div>

代码中的#wrap的div,是用来包裹我们要定位的这两个区的;他后面还有个#footer,用来测试在前面的定位搞定后会不会导致后面的div错位——如果错位了,那证明我们的定位方法必须改进。 继续阅读老生长谈:css实现右侧固定宽度,左侧宽度自适应