我在前面有一篇文章《CSS基础篇--可扩展性的页面布局》中介绍了如下三种布局方式:
1.左右结构,左边100%;右边宽度固定
2.左右结构,左边固定,右边100%
3.左中右结构,左边固定,右边固定,中间100%
上面介绍的就是为了兼容一下低版本浏览器的实现方式,没有使用像column或者flex啥的布局方式。但,我下面的讲解还是为了兼容低版本的实现方式做的总结,只是实现的方法多了几种罗列下。
不管是左是右,反正就是一边宽度固定,一边宽度自适应。
博客园的很多主题也是这样设计的,我的博客园博客也是右侧固定宽度,左侧自适应屏幕的布局方式。
html代码:
自适应区
实现方式方式有如下几种:
1.固定宽度区浮动,自适应区不设宽度而设置 margin
我们以右侧宽度固定,左侧宽度自适应为例:
css代码:
#sidebar {
float: right; width: 300px;
}
#content {
margin-right: 300px;
}
实现效果图: