垂直三列中间元素自动宽度布局

1.最常见的垂直三列布局

html代码：

<body>
<div id="">
    <div>
    <div class="left_div">
    left
    </div>
    <div class="mid_div">
        现在可能还可以在很多老的站点上可以看到这样的代码，相当暴力有效的解决浮动的问题。但是这个用法有一个致命伤，就是每次清除浮动的时候都需要增加一个空标签来使用。
        这种做法如果在页面复杂的布局要经常清楚浮动的时候就会产生很多的空标签，增加了页面无用标签，不利于页面优化。但是我发现大型网站中 居然还在使用这种清楚浮动的方法。有兴趣的同学可以上他们首页搜索一下他们的.blank0这个样式名称。
    </div>
    <div class="right_div">right</div>
    </div>
</div>
</body>

CSS代码：

<style>
     /*
    name:zhiqiang21
    date:2015-05
    des:垂直三列居中，中间div自适应
    */
    body {margin: 0;padding: 0;}
    #body_main{
        margin: 0 auto;
        width: 1280px;
        height: 768px;
        background-color: #3091E5;
        position: relative;
    }

    .left_div {
        width: 200px;
        height:300px;
        position: absolute;
        background-color: #374e0c;
        border: 1px solid #ff0000;
        top: 0;
        left: 0;
        margin-left:200px;
    }

    .mid_div {
        margin:0px 410px 0px 410px;
        background-color: #88E500;
        height: 300px;
    }
    .right_div{
        width: 200px;
        height:300px;
        position: absolute;
        background-color: #374e0c;
        border: 1px solid #ff0000;
        right:0 ;
        top: 0;
        margin-right:200px;
    }
</style>

效果如下图：

这里写图片描述

总结：

主要实现原理就是div的默认宽度是100%。当使用绝对定位，定位好左右两边的div之后，使用margin属性设置div的外边框。之后的div的宽度还是会撑满除去左右两边的margin值的部分。