CSS 常见两列布局、三列布局

我会带着你远行 2021-12-14 12:27 348阅读 0赞

### 一、两列布局： ###

方法一：采用position：absollute;并设置margin-left的值。

#left{
        position:absolute;
        width:300px;
        top:0px;
        left:0px;
        background:#F00;
    }
    
    #right{
        background:#0FC;
        margin-left:300px;
    }
    <div id="left">左边定宽</div> <div id="right">右边自适应</div>

方法二：采用float;并设置overflow:auto;(隐藏溢出的内容)

#left {
        
        float: left;
        width: 300px;
        background-color: blue;
    }
    #right {
        
        overflow: auto;
        background-color: red;
    }
    
    <div id="left">左边自适应</div>
    <div id="right">右边定宽</div>

方法三：使用flex布局的写法

.content{
        
        display:flex;
    }
    .aside.left{
        
        border:5px solid black;
        width:200px;
    }
    .aside.main{
        
        flex-grow:1;
        border:5px solid red;
    }
    .aside {
        
        height:600px;
    }
    <div class="content">
        <div class="aside left"></div>
        <div class="aside main"></div>
    </div>

### 二、三列布局 ###

方法一：与两列布局类似，左右两边设置position：absolute；和top:0;left:0;right:0;

中间设置margin-left和margin-right即可.

*{
        
        padding:0px;
        margin:0px;
    }
    #left,#right{
        
        position:absolute;
        width: 300px;
        top:0;
        background-color: #0FC;
    }
    #left{
        
        left:0;
    }
    #right{
        
        right:0;
    }
    #main{
        
        margin:0 300px;
        background-color:#999;
    }
    
    <div id="left">左边定宽</div>
    <div id="main">中间自适应</div>
    <div id="right">右边定宽</div>

方法二：左右采用float,中间设置 overflow:auto;和margin:0 300px;

*{
        
        padding:0px;
        margin:0px;
    }
    #left,#right{
        
        float:left;
        width: 300px;
        background-color: #0FC;
    }
    #right{
        
        overflow:auto;
        float:right;
    }
    #main{
        
        margin:0 300px;
        background-color:#999;
    }
    
    <div id="left">左边定宽</div>
    <div id="right">右边定宽</div>
    <div id="main">中间自适应</div>

方法三：使用flex布局的写法

.content{
        
        display:flex;
    }
    .aside.left{
        
        order:1;
        border:5px solid black;
        width:200px;
    }
    .aside.left{
        
        order:3;
        border:5px solid black;
        width:200px;
    }
    .aside.main{
        
        order:2;
        flex-grow:1;
        border:5px solid red;
    }
    .aside {
        
        height:600px;
    }
    <div class="content">
        <div class="aside left"></div>
        <div class="aside right"></div>
        <div class="aside main"></div>
    </div>

转载于:https://www.cnblogs.com/hongchenzimo/p/11026429.html