网页三栏布局常用方法

时间:2020-8-31 作者:admin


三栏布局

三栏布局 在网页布局中算是 比较长江的一种,比如淘宝等,诸多网站都是用的三栏布局
它是 两边元素固定,中间自适应,并且 中间的元素优先渲染

第一种:定位
也是比较粗暴的一种 定位 但本人不建议使用 布局容易混乱

第二种:浮动

结构
 <div class="container">
        <div class="left">Left</div>
        <div class="right">Right</div>
        <div class="main">Main</div>
    </div>
    body,html{
            height: 100%;
            padding:0;
            margin: 0;
        }
        /*左边栏左浮动*/
        .left{
            float:left;
            height:100%;
            width:100px;
            background:#ff69b4;
        }
        /*中间栏自适应*/
        .main{
            height:100%;
            margin:0 200px 0 100px;
            background: #659;
        }
        /*右边栏右浮动*/
        .right{
            float:right;
            height:100%;
            width:200px;
            background:#ff69b4;
        }

特点:

简单,兼容性好
当中间内容高于两侧时,两侧高度不会随中间内容变高而变高

flex布局

结构与上一种方式结构一样  (同上)
下面我就不写了

样式

  .container{
            display: flex;
        }
        .left{
            width:200px;
            background: red;
        }
        .main{
            flex: 1;
            background: blue;
        }
        .right{
            width:200px;
            background: red;
        }

特点:

简单、优雅
未来发展趋势,实用
三栏高度统一

table布局

 <div class="container">
        <div class="left">left</div>
        <div class="main">center</div>
        <div class="right">right</div>
    </div>

样式

   .container{
            display: table;
            width:100%;
        }
        .container>div{
            display: table-cell;
        }
        .left{
            width: 100px;
            background: red;
        }
        .main{
            background: blue;
        }
        .right{
            width: 200px;
            background: red;
        }

圣杯布局


<body>
    <div class="wrap">
        <div class="main"> 两边元素固定,中间自适应,并且 中间的元素优先渲染</div>
        <div class="left">left</div>
        <div class="right">right</div>
 
    </div>
</body>

样式


<style>
    .wrap{
        padding: 0 300px 0 200px;
    }
    .main, .left, .right{
        float: left;
        width: 100%;
    }
    .main{
        background-color: #ccc;
    }
    .left{
        background-color: #ffb;
        position: relative;
        width: 200px;
        left: -200px;
        margin-left: -100%;
    }
    .right{
        background-color: #f65;
        position: relative;
        width: 300px;
        right: -300px;
        margin-left: -300px;
    }
</style>

将wrap设置padding,是为了将left, 和right的位置预留出来,否则左右部分会覆盖在中间内容上。
重点:负边距
当我们给元素加上相反的负边距的时候,它会认为它前面的元素的宽度减少了这么多,而实际上前者的宽度并没有改变,最终的效果为:加负边距的元素浮在了它前面元素的上方

双飞翼布局(float)

<body>
    <div class="wrap">
        <div class="main">
            <div class="content">两边元素固定,中间自适应,并且 中间的元素优先渲染
              </div>
            </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>

它由淘宝首创,和圣杯布局实现的效果几乎一样,核心也都是负边距的应用,只不过文档结构和样式略有区别。

<style>
    .main, .left, .right{
        float: left;
    }
    .main{
        background-color: #ccc;
        width: 100%;
    }
    .main .content{
        margin-left: 200px;
        margin-right: 300px;
    }
    .left{
        background-color: #ffb;
        width: 200px;
        margin-left: -100%;
    }
    .right{
        background-color: #f65;
        width: 300px;
        margin-left: -300px;
    }
</style>

中间部分加了一个div 用来放内容 ,当left 和 right 浮在它(div main)上面的时候 不至于覆盖住它的内容

还有一种 网格布局(grid) ,但兼容性不好 不推荐使用就不说了 个人建议用圣杯布局

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。