彈性盒子佈局

時間 2019-11-12

標籤彈性盒子佈局欄目 CSS 简体版

原文原文鏈接

彈性盒子佈局能夠實現寬度和高度自適應的佈局css

水平佈局html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>彈性盒子佈局</title>
    <!--<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">-->
    <!--<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>-->
    <!--<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>-->
</head>
<style>
    .container{
        display: -moz-box;
        display: -webkit-box;
        border: 5px solid blue;
        -moz-box-orient: horizontal;
        -webkit-box-orient: horizontal;
        width: 500px;
        height: 300px;
    }
    .left_side{
        background: orange;
    }
    .content{
        background: yellow;
        /*-moz-box-flex: 1;*/
        /*-webkit-box-flex: 1;*/
    }
    .right_side{
        background: limegreen;
    }
    .left_side,.content,.right_side{
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        font-size: 1.5em;
        font-weight: bold;
    }
</style>
<body>
<div class="container">
    <div class="left_side">我是左側欄</div>
    <div class="content">我是主內容部分</div>
    <div class="right_side">我是右側欄</div>
</div>
</body>
</html>

右邊有一個空白區域，只要給中間內容部分加上 box-flex：1；jquery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>彈性盒子佈局</title>
    <!--<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">-->
    <!--<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>-->
    <!--<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>-->
</head>
<style>
    .container{
        display: -moz-box;
        display: -webkit-box;
        border: 5px solid blue;
        -moz-box-orient: horizontal;
        -webkit-box-orient: horizontal;
        width: 500px;
        height: 300px;
    }
    .left_side{
        background: orange;
    }
    .content{
        background: yellow;
        -moz-box-flex: 1;
        -webkit-box-flex: 1;
    }
    .right_side{
        background: limegreen;
    }
    .left_side,.content,.right_side{
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        font-size: 1.5em;
        font-weight: bold;
    }
</style>
<body>
<div class="container">
    <div class="left_side">我是左側欄</div>
    <div class="content">我是主內容部分</div>
    <div class="right_side">我是右側欄</div>
</div>
</body>
</html>

能夠經過改變屬性 box-orient:vertical 將水平佈局改成垂直佈局，寬度自動鋪滿整個區域web

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>彈性盒子佈局</title>
    <!--<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">-->
    <!--<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>-->
    <!--<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>-->
</head>
<style>
    .container{
        display: -moz-box;
        display: -webkit-box;
        border: 5px solid blue;
        -moz-box-orient: vertical;
        -webkit-box-orient: vertical;
        width: 500px;
        height: 300px;
    }
    .left_side{
        background: orange;
    }
    .content{
        background: yellow;
        -moz-box-flex: 1;
        -webkit-box-flex: 1;
    }
    .right_side{
        background: limegreen;
    }
    .left_side,.content,.right_side{
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        font-size: 1.5em;
        font-weight: bold;
    }
</style>
<body>
<div class="container">
    <div class="left_side">我是左側欄</div>
    <div class="content">我是主內容部分</div>
    <div class="right_side">我是右側欄</div>
</div>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。