页面布局——三栏布局

三栏布局

首先解释一下什么是“三栏布局”:顾名思义,三栏布局就是在网页上以平铺方式展现的左中右三列布局,其特点在于,左右两列可固定在网页两侧,中间一列永远居中,且当网页宽度大于左右两列宽度之和时,中间一列可随网页整体宽度的变化而变化(简单来说就是两端固定,中间自适应)。

下面围绕的这样的目的,罗列出大约7种解决方法(高度固定):

浮动布局

浮动布局的优缺点

html代码:

<style>
    .container>div{min-height:200px}
    .container .left{float:left;width:300px;background:red}
    .container .center{background:#ff0}
    .container .right{float:right;width:300px;background:#00f}
</style>
<section class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
</section>

缺点:1. 当宽度小于左右两边宽度之和时,右侧栏会被挤下去;2. html的结构不正确;3.脱离文档流,要处理浮动

优点:比较简单,兼容性好

绝对布局

绝对布局的优缺点

html代码:

<style>
    .container>div{min-height:200px;position:absolute}
    .container .left{left:0;width:300px;background:red}
    .container .center{left:300px;right:300px;background:#ff0}
    .container .right{right:0;width:300px;background:#00f}
</style>
<section class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
</section>

缺点:因为布局已经脱离文档流了,意味着下面元素也需要脱离文档流,导致了可用性比较差

优点:快捷

圣杯布局

圣杯布局的优缺点

<style>
    .container{padding:0 300px}
    .container>div{min-height:200px;float:left;position:relative}
    .container .left{width:300px;background:red;margin-left:-100%;left:-300px}
    .container .center{width:100%;background:#ff0}
    .container .right{right:-300px;width:300px;margin-left:-300px;background:#00f}
</style>
<section class="container">
    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
</section>

缺点:当父元素有内外边距时,会导致中间栏的位置出现偏差

优点:兼容目前所有的主流浏览器,包括IE6在内;

双飞翼布局

双飞翼布局的优缺点

<style>
    .container div{min-height:200px;float:left}
    .container .left{width:300px;margin-left:-100%;background:red}
    .container .center{width:100%;background:#ff0}
    .container .center .center-wrap{margin:0 300px}
    .container .right{width:300px;margin-left:-300px;background:#00f}
</style>
<section class="container">
    <div class="center">
        <div class="center-wrap"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</section>

缺点:1. 结构不正确 2. 多了一层标签

优点:兼容目前所有的主流浏览器,包括IE6在内;

flex布局

flex布局的优缺点

html代码:

<style>
    .container{display:flex}
    .container>div{min-height:200px}
    .container .left{width:300px;background:red}
    .container .center{flex:1;background:#ff0}
    .container .right{width:300px;background:#00f}
</style>
<section class="container">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</section>

缺点:需要考虑浏览器的兼容性

优点:简单实用,未来的趋势

表格布局

表格布局的优缺点

<style>
    .container{width:100%;display:table;min-height:200px}
    .container>div{display:table-cell}
    .container .left{width:300px;background:red}
    .container .center{background:#ff0}
    .container .right{width:300px;background:#00f}
</style>
<section class="container">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</section>

缺点:无法设置栏间距

优点:兼容性非常好

网格布局

网格布局的优缺点

<style>
    .container{width:100%;display:grid;grid-template-rows:100px;grid-template-columns:300px auto 300px}
    .container .left{background:red}
    .container .center{background:#ff0}
    .container .right{background:#00f}
</style>
<section class="container">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</section>

缺点:兼容性比较差

优点:代码简洁,容易理解

这是我的原创文章,如果觉得不错,可以打个赏~
0%