两边固定，中间自适应布局

1.浮动，先左右再中

.left{
    float: left;
    width: 300px;
    height: 100px;
    background: #000;
}
 .right{
     width: 300px;
     height: 100px;
     float: right;
     background: pink;
 }
 .main{
     height: 100px;
     background: blue;
 }


<div class="contain">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"><h1>aa</h1></div>
</div>

2.绝对定位

  .left{
            position:absolute;
            width: 300px;
            height: 100px;
            background: #000;
            left: 0;
        }

        .right{
            position: absolute;
            width: 300px;
            height: 100px;
            background: pink;
            right: 0;
        }
        .main{
            position: absolute;
            left: 300px;
            right: 300px;
            height: 100px;
            background: blue;
        }


    </style>
</head>
<body>
<div class="contain">
    <div class="left"></div>
    <div class="main">aa</div>
    <div class="right"></div>
</div>

3.弹性布局 flex 左中右

  .contain{
            display: flex;
            flex-flow: wrap row;
        }
       .left{
           width: 300px;
           height: 100px;
           background: #000;
       }

        .right{
            width: 300px;
            height: 100px;
            background: pink;
        }
        .main{
            flex: 1;
            height: 100px;
            background: blue;
        }


    </style>
</head>
<body>
<div class="contain">
    <div class="left"></div>
    <div class="main"></div>
    <div class="right"></div>
</div>

4.表格布局

 .contain{
            width: 100%;
            display: table;
            height: 100px;
        }
        .contain div{
            display: table-cell;
        }
        .left{
            width: 300px;
            height: 100px;
            background: #000;
        }

        .right{
            width: 300px;
            height: 100px;
            background: pink;
        }
        .main{
            height: 100px;
            background: blue;
        }
        
    </style>
</head>
<body>
<div class="contain">
    <div class="left"></div>
    <div class="main">aa</div>
    <div class="right"></div>
</div>

5.网格布局

 .contain{
            display: grid;
            grid-template-columns: 300px auto 300px;
            grid-template-rows: 100px;
        }
        .left{
            background: #000;
        }
        .main{
            background: blue;
        }
        .right{
            background: pink;
        }
        
    </style>
</head>
<body>
<div class="contain">
    <div class="left">11111111</div>
    <div class="main">aa</div>
    <div class="right">44444444444444444</div>
</div>

两边固定，中间自适应布局

猜你喜欢