怎么给网页写一个侧栏（横向两列布局-使用绝对定位和相对定位的方法）

使用absolute实现横向两列布局，常用于一列固定宽度，另一列宽度自适应的情况。

主要应用技能：

relative-父级元素相对定位

absolute-自适应宽度元素绝对定位

注意：固定宽度列的高度>自适应宽度的列

像是一个这样的网页

他有3个主栏，1个侧栏。这个应该怎么来实现？

…………………………………………………………………………………………………………………………

我觉得是这样的，就是我们在写一个网页的时候，应该先从全局来看，在什么地方有什么东西，是什么样的。然后在看各个部分是什么样的。就像踢足球，我们要先有个团队的进攻思路，什么阵型啊，433还是4231啊还是352啊，确定了之后，我们再说局部的配合怎么踢。

我们来看一下这张图片，首先，他分为了两部分，左边是3个主栏，右边是1个侧栏。

既然如此的话，那我们就可以写两个大的div，一个是左边left，一个是右边right。

之后再在左边的大div里再写3个小的div就可以啦。这就是我们构建这个网页的思路。

那么，怎么让left这个div靠左，而right这个div靠右呢？

这个时候，我们就要用上CSS布局模型里面的层模型，通过对不同的div设置绝对定位absolute和相对定位relative来实现。也叫做绝对定位absolute和相对定位relative的组合使用。

我们来回顾一下这个方法，

这个方法要求，参照定位的元素要设置position:relative，定位元素要设置position:absolute。

如下：

<div id="box1"><!--参照定位的元素-->
    <div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div>

#box1{
    width:200px;
    height:200px;
    position:relative;        
}

#box2{
    position:absolute;
    top:20px;
    left:30px;         
}

…………………………………………………………………………………………………………………………

那么，我们这个网站怎么来写呢？

首先我们可以把网页本身即body当做一个参照定位元素。然后right这个div当做一个定位元素。

然后这个body里面写两个div，一个left，一个right。之后再在left里写三个div就搞定了。

先来写body里面的吧，写完我们在写css。

body：

css：

实现之后的样子：

完啦。