css之三栏布局的几种方式

最新推荐文章于 2024-06-02 17:14:20 发布

baichaji

最新推荐文章于 2024-06-02 17:14:20 发布

阅读量307

点赞数 2

文章标签： css 前端 html

本文链接：https://blog.csdn.net/baichaji/article/details/128448656

版权

本文对css中一些有关三栏布局的发放进行了总结，包括浮动、定位、弹性布局、表格等方式。

b1、浮动实现三栏布局

利用浮动实现三栏布局时。我们可以给左盒子设置左浮动，右盒子设置右浮动，注意中间的盒子要写在中间，代码如下

 <style type="text/css">
               *{
            margin: 0;
            padding: 0;
        }
        .main{
            width: 100%;
            height: 500px;
        }
         .main::after{

            content: "";
            display: inline-block;
            clear: both;
            height: 0;
            visibility: hidden;
        }
        .left{
            float: left;
            background-color: aqua;
            width: 200px;
            height: 500px;
        }
        .right{
            float: right;
            width: 200px;
            background-color: aquamarine;
            height: 500px;
        }
        .middle{
            background-color: antiquewhite;
            height: 500px;
        } 
    </style>
</head>
<body>
    <div class="main">
        <div class="left"></div>
        <div class="right"></div>
        <div class="middle"></div>
        
    </div>
</body>
</html>

2、定位实现三栏布局

定位实现三栏布局时，子盒子设置绝对定位，父盒子设置相对定位，左边的盒子的top：0；left:0;右边的盒子top:0;right:0;

  <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .main{
            width: 100%;
            height: 500px;
            position: relative;
        }
          .left{
            
            background-color: aqua;
            width: 200px;
            height: 500px;
            position: absolute;
            top: 0;
            left: 0;
        }
        .right{
            position: absolute;
            width: 200px;
            background-color: aquamarine;
            height: 500px;
            top: 0;
            right: 0;
        }
        .middle{
            background-color: antiquewhite;
            height: 500px;
            width: calc(100% - 400px);
            position: absolute;
            top: 0;
            left: 200px;
            
        }
         </style>
</head>
<body>
    <div class="main">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
        
        
    </div>
  
</body>

3、flex实现三栏布局

flex实现三栏布局，需要给父盒子设置display:flexed;中间的盒子设置flex:1;

  <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .main{
            width: 100%;
            display: flex;
            flex-direction: row;
            height: 500px;
           
        }
        .left{
           
            background-color: aqua;
            width: 200px;
            height: 500px;
        }
        .right{
           
            width: 200px;
            background-color: aquamarine;
            height: 500px;
        }
        .middle{
            background-color: antiquewhite;
            height: 500px;
            flex: 1;
        }
         </style>
</head>
<body>
    <div class="main">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
        
        
    </div>
  
</body>

4、table实现三栏布局

table实现三栏布局，给父盒子设置display:table;左右子盒子设置display:table-cell;

    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .main{
            display: table;
            width: 100%;
            height: 500px;
        }
        .left{
            display: table-cell;
            background-color: rgb(129, 218, 218);
            width: 200px;
            height: 500px;
        }
        .right{
            display: table-cell;
            width: 200px;
            background-color: rgb(17, 160, 113);
            height: 500px;
        }
        .middle{
            background-color: rgb(234, 139, 14);
            height: 500px;
        } 
        </style>
</head>
<body>
    <div class="main">
       
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
        
        
    </div>
   
</body>
</html>

5、grid实现三栏布局

grid实现三栏布局，给父盒子设置display:grid;grid-template-row,做右盒子给宽度，中间auto。

    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .main{
            display: grid;
            width: 100%;
            height: 500px;
            grid-template-columns: 200px auto 300px;
            grid-template-rows: 500px;
        }
        .left{
            background-color: rgb(129, 218, 218);

        .right{
          
            background-color: rgb(17, 160, 113);

        }
        .middle{
            background-color: rgb(234, 139, 14);

        } 
        </style>
</head>
<body>
    <div class="main">
       
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
        
        
    </div>
   
</body>
</html>