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

左手的ㄟ右手 2022-08-08 12:59 12阅读 0赞

### **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代码：** ####

#### **效果如下图：** ####

![这里写图片描述][20150519103730398]

还有一种应用场景就是左边固定宽度，右边内容区域宽度自适应，但是右边的内容区域的宽度可能跟左边的 sidebar高度是不一致的，效果如图：

![这里写图片描述][20160406191219718]

**上面的布局的难点主要就是左边的高度不定，需要将底部的 foot给撑开**

具体的 css代码实现如下：

.item1 { background-color: rgb(107, 233, 176); width: 200px; height: 400px; float: left; }
    
            .item2 { background-color: rgb(189, 249, 81); height: 300px; /*margin-left: -205px;*/ margin-left:205px; }
    
            .fotter { height: 100px; background-color: rgb(121, 42, 233); }
    
            .clearfix::after { display: block; height: 0; content: "\200B"; clear: both; }
    
            .clearfix { *zoom: 1; /*兼容 ie6/7*/ }

### **总结：** ###

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

[20150519103730398]: /images/20220805/66c3ae521232452394334b8c1991684b.png
[20160406191219718]: /images/20220805/92cc12c9df214946aea012a27fd1acfb.png