最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
Css实现左栏固定宽度,右栏自适应宽度实例
时间:2013-09-13 编辑:简简单单 来源:一聚教程网
例
代码如下 | 复制代码 |
右栏 |
看起来很美好,但是。。
由于左栏使用绝对定位,脱离了文档流,因此有一个缺陷,即当左栏高度大于右栏时,无法将container撑开,这个缺陷单单只看两栏布局并没有太大影响,但如果两栏布局下面有一个底栏,就会出现底栏与左栏重叠的情况:
代码如下 | 复制代码 |
右栏 |
我们再来看看第二种方法,左栏固定宽度,右栏自适应之负margin法:
代码如下 | 复制代码 |
右栏 |
这样无论两栏的高度如何变化都不会有问题了:
代码如下 | 复制代码 |
右栏 |
相关文章
- css实现二列宽度自适应实例 12-20
- css div自适应宽度实例 03-31
- CSS 鼠标点击拖拽效果代码展示 10-31
- CSS使用SVG实现动态分布的圆环发散路径动画教程 10-31
- css3中仿放大镜效果的几种方式原理介绍 10-26
- CSS3切割轮播图的代码展示 10-26