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

最新推荐文章于 2024-03-27 16:54:49 发布

zhiqiang21

最新推荐文章于 2024-03-27 16:54:49 发布

阅读量2.4k

点赞数

分类专栏： HTML+CSS 文章标签：自动宽度绝对定位垂直三列

本文链接：https://blog.youkuaiyun.com/yisuowushinian/article/details/45841865

版权

HTML+CSS 专栏收录该内容

23 篇文章

订阅专栏

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>

效果如下图：

这里写图片描述

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

这里写图片描述

上面的布局的难点主要就是左边的高度不定，需要将底部的 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*/
        }