时间戳

首页 > 技术文章 > 两边定宽，中间自适应布局的四种实现方法

两边定宽，中间自适应布局的四种实现方法

yzhihao 2017-03-08 14:21 原文

1. 浮动法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两边定宽，中间自适应</title>
    <style type="text/css">
    html,body,div{
 　　　　height: 80%;
　　　　border:3px solid black;
 } .left{ width: 300px; float: left; background-color: red; } .right{ width: 300px; float: right; background-color: yellow; } .center{ margin: auto 300px; background-color: green; } </style> </head> <body> <div class="left"></div> <div class="right"></div> <div class="center"></div> </body> </html>

2. 定位法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两边定宽，中间自适应</title>
    <style type="text/css">
    html,body,div{
 　　　　height: 80%;
　　　　border:3px solid black;
 } .parent{ position: relative; } .left{ width: 300px; position: absolute; left: 0; background-color: red; } .right{ width: 300px; position: absolute; right: 0; background-color: yellow; } .center{ margin: auto 300px; background-color: green; } </style> </head> <body> <div class="parent"> <div class="left"></div> <div class="right"></div> <div class="center"></div> </div> </body> </html>

3. 弹性盒子法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两边定宽，中间自适应</title>
    <style type="text/css">
    html,body,div{
　　　　height: 80%;
　　　　border:3px solid black;
 } .parent{ display: flex; } .left{ width: 300px; background-color: red; } .right{ width: 300px; background-color: yellow; } .center{ flex:1; background-color: green; } </style> </head> <body> <div class="parent"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div> </body> </html>

4.calc计算法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两边定宽，中间自适应</title>
    <style type="text/css">
    html,body,div{
        height: 80%;
　　　　border:3px solid black;
    }
   .left{
        width: 300px;
        float: left;
        background-color: red;
    }
    .right{
        width: 300px;
        float: right;
        background-color: yellow;
    }
    .center{
        width: calc(100% - 620px);
        margin: 0 auto;
        background-color: green;
    }

    </style>
</head>
<body>
    <div class="left"></div>
    <div class="right"></div> 
    <div class="center"></div>
</body>
</html>

推荐阅读