Layout布局

1. 使用方法：

1.1 行元素

<div class="mcb-row">

1.2 列元素

<div class="mcb-col mcb-span1">

列元素嵌套在行元素中。一行等分20份，mcb-span1代表占宽度的1/20，依次类推，列元素从左往右排列。

当一行中mcb-span总数小于20时，并且行元素<div class="mcb-row space-between">设置space-between类时，元素之间间隔等分。（兼容性：Edge 12, Firefox 20, Safari 9, Chrome 29, IE 11, Opera 12）

1.3 与Layout布局相关的css变量

--layout-border-color mcb-col的边框颜色

--layout-border-width mcb-col的边框线宽度

--layout-padding mcb-col的内边距

2. 使用实例：

                <!-- 下方样式只做演示使用，可自行调整。 -->
                <style>
                    .layout-container {
                        height: 200px; width: 380px
                    }
                    .space-between-test {
                        height: 100px; width: 380px;
                    }
                </style>
                <div class="layout-container">
                    <div class="mcb-row" style="height: 20%;">
                        <div class="mcb-col mcb-span20">标题</div>
                    </div>
                    <div class="mcb-row" style="height: 80%;">
                        <div class="mcb-col mcb-span4">导航</div>
                        <div class="mcb-col mcb-span16">内容</div>
                    </div>
                </div>
                <p style="margin-top: 20px;">间隔等分：</p>
                <div class="space-between-test">
                    <div class="mcb-row space-between" style="height: 100%;">
                        <div class="mcb-col mcb-span4">1</div>
                        <div class="mcb-col mcb-span4">2</div>
                        <div class="mcb-col mcb-span4">3</div>
                        <div class="mcb-col mcb-span4">4</div>
                    </div>
                </div>

3. 效果展示：

间隔等分：