html如何单独设置一列的宽,CSS基础篇--页面实现两列布局，一列固定宽度，一列宽度自适应方法...

我在前面有一篇文章《CSS基础篇--可扩展性的页面布局》中介绍了如下三种布局方式：

1.左右结构，左边100%；右边宽度固定

2.左右结构，左边固定，右边100%

3.左中右结构，左边固定，右边固定，中间100%

上面介绍的就是为了兼容一下低版本浏览器的实现方式，没有使用像column或者flex啥的布局方式。但，我下面的讲解还是为了兼容低版本的实现方式做的总结，只是实现的方法多了几种罗列下。

不管是左是右，反正就是一边宽度固定，一边宽度自适应。

博客园的很多主题也是这样设计的，我的博客园博客也是右侧固定宽度，左侧自适应屏幕的布局方式。

html代码：

固定宽度区

自适应区

实现方式方式有如下几种：

1.固定宽度区浮动，自适应区不设宽度而设置 margin

我们以右侧宽度固定，左侧宽度自适应为例：

css代码：

#sidebar {

float: right; width: 300px;

}

#content {

margin-right: 300px;

}

实现效果图：