关注前端 | 前端博客
当前位置: CSS > 三栏布局,左右栏宽为300px,中间自适应

三栏布局,左右栏宽为300px,中间自适应

2019-12-21 分类:CSS 作者:管理员 阅读(454)

1. flexbox 弹性伸缩盒子
2. table 表格布局
3. absolute 绝对定位
4. grid网格布局
5. float 浮动布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>三栏布局左右宽度300px,中间宽度自适应</title>
</head>
<style>
    *{margin: 0;padding: 0;}
    /* flex */
    .flex-container{
        height: 100px;
        background-color: bisque;
        display: flex;
    }
    .flex-left,.flex-right{
        width: 300px;
        height: 100px;
        background-color: #0fb9b1;
   }
    .flex-middle{
        flex: 1;
        background-color: #e77f67;
   }
    /* table */
    .table-container{
        width: 100%;
        height: 100px;
        background-color: bisque;
        display: table;
    }
    .table-left,.table-right{
        width: 300px;
        height: 100px;
        background-color: #0fb9b1;
       display: table-cell;
    }
    .table-middle{
        width: 100%;
        height: 100px;
        background-color: #e77f67;
   }
    /* float */
    .float-container{
        width: 100%;
        height: 100px;
        background-color: bisque;
    }
    .float-left,.float-right{
        width: 300px;
        height: 100px;
        background-color: #0fb9b1;
       
    }
    .float-right{
        float: right;
    }
    .float-left{
        float: left;
    }
    .float-middle{
        height: 100px;
        background-color: #e77f67;
   }
    /* position */
    .position-container{
        width: 100%;
        height: 100px;
        background-color: bisque;
        position: relative;
    }
    .position-left,.position-right{
        width: 300px;
        height: 100px;
        background-color: #0fb9b1;
       position: absolute;
    }
    .position-left{
        left: 0;
    }
    .position-right{
        right: 0;
    }
    .position-middle{
        height: 100px;
        position: absolute;
        left: 300px;
        right: 300px;
        background-color: #e77f67;
   }
    /* 第五种 grid */
    .grid-container{
        height: 100px;
        background-color: bisque;
        display: grid;
        grid-template-columns: 300px auto 300px;
    }
    .grid-left,.grid-right{
        background-color: #0fb9b1;
   }
    .grid-middle{
        background-color: #e77f67;
   }
</style>
<body>
    <!-- 第一种 flex -->
    <div class="flex-container">
        <div class="flex-left"></div>
        <div class="flex-middle">第一种 flex</div>
        <div class="flex-right"></div>
    </div>
    <!-- 第二种 table -->
    <div class="table-container">
        <div class="table-left"></div>
        <div class="table-middle">第二种 table</div>
        <div class="table-right"></div>
    </div>
    <!-- 第三种 float -->
    <div class="float-container">
        <div class="float-left"></div>
        <div class="float-right"></div>
        <div class="float-middle">第三种 float</div>
    </div>
    <!-- 第四种 position -->
    <div class="position-container">
        <div class="position-left"></div>
        <div class="position-middle">第四种 position</div>
        <div class="position-right"></div>
    </div>
    <!-- 第五种 grid -->
    <div class="grid-container">
        <div class="grid-left"></div>
        <div class="grid-middle">第五种 grid</div>
        <div class="grid-right"></div>
    </div>
</body>
</html>

111

「三年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(1) 打赏

感谢您让我添加个鸡腿!

支付宝
微信
1

感谢您让我添加个鸡腿!

支付宝
微信

上一篇:

下一篇:

共有 0 条评论 - 三栏布局,左右栏宽为300px,中间自适应

博客简介

一个不知名的前端菜鸟,梦想能够飞上青天!
掘金 思否 npm github

精彩评论

服务热线:
 177****6038

 QQ在线交流

 旺旺在线