我学习的三种三栏（左中右）布局方法

我学习的三种三栏（左中右）布局方法（不想要自适应的话设置一个宽度即可）

绝对定位方法，两边用绝对定位固定在窗口两边，中间采用自适应宽度，利用margin属性把两边撑开。代码如下：

<style type="text/css">

* {margin: 0;}

.left{position: absolute;top: 0;left: 0;width: 300px;height: 300px;background: #ccc;}

.right{position: absolute;top: 0;right: 0;width: 300px;height: 300px;background: #ccc;}

.main{margin: 0 300px;height: 300px;background: #f00;}

</style>

 

<body>

<div class="left">左列</div>

<div class="main">中间</div>

<div class="right">右列</div>

</body>

优点：比较简单容易，受到内部影响不大

缺点：中间有最小宽度的限制，当宽度小到一定值，会发生元素重叠的情况

margin负值方法，此方法要让中间内容放在最前面，并且要使用一个容器把其包起来，外层width设置为100%，随屏幕自适应，然后让外层元素整体浮动，内层为真正的内容，左右两列均采用margin负值定位，左列左浮动，然后设置margin-left为-100%,右列也设置左浮动，然后设置margin-left为自身的宽度的负值。代码如下：
```
<style type="text/css">

* {margin: 0;}

.wrap {width: 100%;height: 300px;float: left;}

.wrap .main {margin: 0 300px;height: 300px;background: #f00;}

.left,.right {float: left;width: 300px;height: 300px;background: #ccc;}

.left {margin-left: -100%;}

.right {margin-left: -300px;}

</style>

 

<body>

<div class="wrap">

<div class="main">中间</div>

</div>

<div class="left">左列</div>

<div class="right">右列</div>

</body>
```
优点：三列相互关联，受到内部影响不大

缺点：比较难理解，相对其他比较复杂

浮动方法，此方法要让中间内容放在最后面，左列左浮动，右列右浮动，中间利用浮动的跟随性，实现三列自适应布局，代码如下：

<style type="text/css">

* {margin: 0;}

.left {float: left;width: 300px;height: 300px;background: #ccc;}

.right {float: right;width: 300px;height: 300px;background: #ccc;}

.main {margin: 0 300px;height: 300px;background: #f00;}

</style>

 

<body>

<div class="left">左列</div>

<div class="right">右列</div>

<div class="main">中间</div>

</body>

优点：简单易懂，代码简洁

缺点：中间内容不能使用clear：both属性

　　　除了第一种绝对定位方法可以不在意左中右三列div的顺序，第二种margin负值和第三种浮动方法都需要注意左中右三列div的顺序，第二中方法需要给中间内容套一层父级div元素。以上就是我学习的三种三列自适应布局的方法。

我学习的三种三栏（左中右）布局方法

推荐阅读