欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

常见的五种三列布局

程序员文章站 2022-04-12 17:08:36
前言：本文介绍五种常见的三列布局，主要是两侧定宽，中间自适应，其他情况大同小异。 方式一：float HTML代码： CSS代码： 方式二：table布局，非HTML中标签 HTML代码： CSS代码： 方式三：flex布局 HTML代码： CSS代码： 方式四：grid布局 HTML ......

前言：本文介绍五种常见的三列布局，主要是两侧定宽，中间自适应，其他情况大同小异。

 

方式一：float

HTML代码：

<div class="layout-float">
    <div class="left">左边</div>
    <div class="center">这是中间</div>
    <div class="right">右边</div>
</div>

CSS代码：

<style>
    .left {
        float: left;
        width: 300px;
        background-color: blue;
    }
    .right {
        float: right;
        width: 300px;
        background-color: blue;
    }
     .center {
        background-color: red;
    }
</style>

方式二：table布局，非HTML中<table>标签

HTML代码：

<div class="layout-table">
    <div class="left"></div>
    <div class="center">这是中间</div>
    <div class="right"></div>
</div>

CSS代码：

<style>
    .layout-table{
        width: 100%;
        display: table;
        height: 100px;
    }
    .layout-table div {
        display: table-cell;
    }
    .left {
        width: 300px;
        background-color: blue;
    }
    .right {
        width: 300px;
        background-color: red;
    }
    .center {
        background-color: blue;
    }
</style>

 

方式三：flex布局

HTML代码：

<div class="layout-flexbox">
    <div class="left"></div>
    <div class="center">这是中间</div>
    <div class="right"></div>
</div>

 

CSS代码：

<style>
    .layout-flexbox{
        display: flex;
    }

    .left {
        width: 300px;
        background-color: blue;
    }

    .center {
        flex: 1;
        background-color: green;
    }

    .right {
        width: 300px;
        background-color: blue;
    }
</style>

 

方式四：grid布局

 

HTML代码：

<div class="layout-grid">
    <div class="left"></div>
    <div class="center">这是中间</div>
    <div class="right"></div>
</div>

 

 

CSS代码：

<style>
    .layout-grid{
        display: grid;
        width:100%;
        grid-template-rows:100px;
        grid-template-colums:300px auto 300px;
    }
    .left {
        background-color: blue;
    }
    .center {
        background-color: green;
    }
    .right {
        background-color: blue;
    }
</style>

 

 

方式五：绝对布局

 

HTML代码：

<div class="layout-absolute">
    <div class="left"></div>
    <div class="center">这是中间</div>
    <div class="right"></div>
</div>

 

 

CSS代码：

<style>
    .layout-absolute div{
        position: absolute;
    }
    .left {
        left:0;
        width:300px;
        background-color: blue;
    }
    .center {
        left:300px;
        right:300px;
        background-color: green;
    }
    .right {
        width:300px;
        right:0;
        background-color: blue;
    }
</style>

 五种方法的优缺点：

float：兼容性较好，一般需要清除浮动

table：兼容性较好，SEO不太友好

grid：新技术，对旧浏览器兼容不太好，代码简洁

absolute：方便易用，脱离文档流，可使用性较差

flex：没什么明显缺点，且移动端友好

 

上一篇： 安卓详细布局分析-从根布局到具体布局

下一篇： Web as a App(Web既APP)的概念可以提出吗？

推荐阅读