經過Flex佈局實現三等分

時間 2019-11-08

標籤經過 flex 佈局實現三等分欄目 Flex 简体版

原文原文鏈接

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="../css/mui.min.css" rel="stylesheet" />
        <style>
            #div {
                width: 100%;
                height: 50px;
                border: 2px solid #bbb;
                -webkit-box-orient: horizontal;
                display: -webkit-box;
            }
            
            .aa {
                -webkit-box-flex: 1;
            }
            
            .one {
                background: #00AACC;
            }
            
            .two {
                background: #F0AD4E;
                -webkit-box-flex: 2;
            }
            
            .three {
                background: #1ABC9C;
            }
        </style>
    </head>

    <body>
        <div id="div">
            <div class="aa one"></div>
            <div class="aa two"></div>
            <div class="aa three"></div>
        </div>
        <script src="../js/mui.min.js"></script>
        <script type="text/javascript">
            mui.init()
        </script>
    </body>

</html>

相關標籤/搜索

每日一句

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