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

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

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>

结果如下:

 

 

 

 

  • 3
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值