前端三列布局的几种实现方式

最新推荐文章于 2023-03-30 00:04:21 发布

sinuo123_5

最新推荐文章于 2023-03-30 00:04:21 发布

阅读量1.4k

点赞数 3

分类专栏： HTML+CSS 文章标签：三列布局双飞翼布局圣杯布局

本文链接：https://blog.csdn.net/sinuo123_5/article/details/103562735

版权

HTML+CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文主要讲述几种常用的前端三列布局的方式。

1.两侧浮动＋中间自动铺开

主要是左右盒子两边分别float:left,float:right，中间通过margin值自动撑开。代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title> float+margin实现三列布局 </title>

    <style>
        .left{
            width:200px;
            background-color: red;
            float:left;
        }
        .right{
            width:300px;
            background-color: yellow;
            float:right;
        }
        .main{
            margin-left:200px;
            margin-right:300px;
            background-color: blue;
        }
        .left,.right,.main{
            height:300px;
        }
    </style>
</head>

<body>
    <div class="left">左盒子</div>
    <div class="right">右盒子</div>
    <div class="main">中间盒子</div>
</body>
</html>

实现结果如下：

2.绝对定位

给每个盒子设置绝对定位，用left,right值实现。代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>绝对定位实现三列布局</title>
    <style>
        .left,.main,.right{
            height:300px;
        }
        .left{
            position: absolute;
            left:0;
            background-color :red;
            width:200px;
        }
        .main{
            position: absolute;
            left:200px;
            right:300px;
            background-color: yellow;
        }
        .right{
            position: absolute;
            right:0;
            width:300px;
            background-color: blue;
        }
        
    </style>
</head>
<body>
<div class="container">
    <div class="left">左盒子</div>
    <div class="main">中间盒子</div>
    <div class="right">右盒子</div>
</div>
</body>
</html>

结果如下：

3.BFC实现三列布局

利用BFC清除浮动的特性来实现（overflow:hidden等），代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>BFC实现三列布局</title>

    <style>
        .left{
            width:200px;
            background-color: red;
            float:left;
            margin-right: 10px;
        }
        .right{
            width:300px;
            background-color: yellow;
            float:right;
            margin-left: 10px;
        }
        .main{
            background-color: blue;
            overflow: hidden;
        }
        .left,.right,.main{
            height:300px;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="left">左盒子</div>
    <div class="right">右盒子</div>
    <div class="main">中间盒子</div>
</div>


</body>
</html>

结果如下：

4.双飞翼布局

利用margin负值移动元素位置

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>双飞翼布局</title>

    <style>
        .center{
            width:100%;
            float: left;
        }
        .main{
            margin-left:210px;
            height:200px;
            margin-right: 310px;
            background-color: yellow;
        }
        .left{
            float:left;
            width:200px;
            height: 200px;
            margin-left: -100%;
            background-color: red;
        }
        .right{
            float:left;
            width:300px;
            background-color: blue;
            height: 200px;
            margin-left:-300px;

        }
    </style>
</head>
<body>
<div class="center">
    <div class="main">中间的盒子</div>
</div>
<div class="left">左边的盒子</div>
<div class="right">右边的盒子</div>
</body>
</html>

结果如下：

5.圣杯布局。

与双飞翼布局类似不同的是圣杯布局的中间盒子是被另一个父元素包裹这的，而圣杯布局不需要被包裹。而是使用padding值来确定盒子内部的内容位置。代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>圣杯布局</title>
    <style type="text/css">
        .container {
            padding: 0 300px 0 200px;
        }
        .left, .main, .right {
            position: relative;
            min-height: 130px;
            float: left;
        }
        .left {
            left: -200px;
            margin-left: -100%;
            background: green;
            width: 200px;
        }
        .right {
            right: -300px;
            margin-left: -300px;
            background-color: red;
            width: 300px;
        }
        .main {
            background-color: blue;
            width: 100%;
        }
    </style>
</head>
<body>
<div class="container">
    　　<div class="main">main</div>
    　　<div class="left">left</div>
    　　<div class="right">right</div>
</div>
</body>
</html>

结果如下：

6.flex实现三列布局

利用flex的属性实现三列布局，对flex属性不熟悉的同学可以先看阮一峰大神的关于flex的讲解。非常简单，代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>flex实现三列布局</title>

    <style>
        .container{
           display: flex;
            height:200px;
        }
        .left,.right,.main{
            height:100%
        }
        .left{
            width:200px;
            background-color: red;
            
        }
        .right{
            width: 300px;
            background-color: yellow;
        }
        .main{
            flex: 1;
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="left">我是左边的盒子</div>
    <div class="main">我是中间的盒子</div>
    <div class="right">我是右边的盒子</div>
</div>
</body>
</html>

结果如下：

7.table实现三栏布局

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>table实现三列布局</title>
    <style>
        .container{
            display: table;
            height:300px;
            width:100%;
        }
        .left,.main,.right{
            height:100%;
            display: table-cell;
        }
        .left{
            width:200px;
            background-color: red;
        }
        .main{
            background-color: yellow;
        }
        .right{
            width:300px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="left">我是左边的盒子</div>
    <div class="main">我是中间的盒子</div>
    <div class="right">我是右边的盒子</div>
</div>
</body>
</html>

结果如下：

8.grid实现三栏布局

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>grid实现三列布局</title>
    <style>
        .container{
            display: grid;
            grid-template-rows: 300px;
            grid-template-columns: 200px auto 300px;
        }
        .left{
            background-color: red;
        }
        .main{
            background-color: yellow;
        }
        .right{
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="left">我是左边的盒子</div>
    <div class="main">我是中间的盒子</div>
    <div class="right">我是右边的盒子</div>
</div>
</body>
</html>

结果如下：

sinuo123_5

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
前端三列布局的几种实现方式

本文主要讲述几种常用的前端三列布局的方式。1.两侧浮动＋中间自动铺开主要是左右盒子两边分别float:left,float:right，中间通过margin值自动撑开。代码如下：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title...
复制链接

扫一扫