css實現「品」字形分級圖

如下內容純屬我的的一點點或許不大成熟的思考，若你們發現有問題或者更好的思路看法歡迎指出，謝謝你們！

開端

在某一個風和日麗的下午，一個小夥伴小窗我，詢問下面這樣的分型圖，應該用什麼思路去實現它。我看到這個圖片愣了2秒鐘，腦海就冒出一個詞——定位，沒錯就是定位。而後，又花了2秒鐘茫然定位是最好的解決辦法麼？而後愉快的決定動手寫一寫用定位怎麼去實現這個效果（不是要想其餘更好的解決辦法麼..啊喂），一本正經敲代碼臉（嗨呀，好氣哦，裝什麼聽不到）。

效果圖：

感謝brook的提醒加上在線預覽地址：

方法一：css+jq實現效果
方法二：flex實現效果

tips：本例只適用於固定一分二這種模式，示例藍色框定寬定高。
思路：以一個品字爲單元，而後考慮如何讓他們銜接起來,採用.box-line的僞類顯示線條。

主體html:

<div class="wrap">

    <div class="mind-map-column">
        <div class="box-wrap">
            <div class="box-line"></div>
            <div class="box">1級</div>
        </div>
    </div>

    <div class="mind-map-column">
        <div class="box-wrap">
            <div class="box-line"></div>
            <div class="box">2級</div>
        </div>
        <div class="box-wrap">
            <div class="box-line"></div>
            <div class="box">2級</div>
        </div>
    </div>

    <div class="mind-map-column">
        <div class="box-wrap">
            <div class="box-line"></div>
            <div class="box">3級</div>
        </div>
        <div class="box-wrap">
            <div class="box-line"></div>
            <div class="box">3級</div>
        </div>
        <div class="box-wrap">
            <div class="box-line"></div>
            <div class="box">3級</div>
        </div>
        <div class="box-wrap">
            <div class="box-line"></div>
            <div class="box">3級</div>
        </div>
        </div>
    </div>
</div>

方法一：css+jq實現（兼容IE9+，更低版本未測試）

考慮到兼容性，該方法css方面採起浮動而後經過jq計算每個品的寬度。

css:

.mind-map-column{
        height: 160px;
    }
    .box{
        background: #0092ff;
        width: 200px;
        height: 100px;
        color: #fff;
        text-align: center;
        line-height: 100px;
        position: absolute;
        left: 50%;
        margin-left: -100px;
    }
    .box-wrap{
        margin: 30px auto;
        position: relative;
        height: 100px;
        float: left;
    }
    .box-line:before{
        content: '';
        width: 1px;
        background: #ccc;
        position: absolute;
        top: -30px;
        left: 50%;
        bottom: -30px;
        margin-left: -1px;
    }
    .box-line:after{
        content: '';
        height: 1px;
        background: #ccc;
        position: absolute;
        top: 130px;
        left: 25%;
        width: 50%;
    }
    .noborder-top .box-line:before{
        top: 0;
    }
    .noborder-bottom .box-line:before{
        bottom: 0;
    }
    .noborder-bottom .box-line:after{
        height: 0;
    }

jq:

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script>
    $(function(){

        for(var i=0;i < $('.mind-map-column').length;i++){
            var childNum = $('.mind-map-column').eq(i).find('.box-wrap').length;
            $('.mind-map-column').eq(i).find('.box-wrap').width(100/childNum+"%");
        }
        $('.mind-map-column:first').addClass('noborder-top');
        $('.mind-map-column:last').addClass('noborder-bottom');

    })
</script>

方法二：flex佈局（兼容IE11+）

若是是高級瀏覽器就「嘿嘿嘿」，flex直接走起。

css：

.mind-map-column{
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
    }
    .box{
        background: #0092ff;
        width: 200px;
        height: 100px;
        color: #fff;
        text-align: center;
        line-height: 100px;
        position: absolute;
        left: 50%;
        margin-left: -100px;
    }
    .box-wrap{
        margin: 30px auto;
        height: 100px;
        width: 0%;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
        position: relative;
    }
    .box-line:before{
        content: '';
        width: 1px;
        background: #ccc;
        position: absolute;
        top: -30px;
        left: 50%;
        bottom: -30px;
        margin-left: -1px;
    }
    .box-line:after{
        content: '';
        height: 1px;
        background: #ccc;
        position: absolute;
        top: 130px;
        left: 25%;
        width: 50%;
    }
    .mind-map-column:first-child .box-line:before{
        top: 0;
    }
    .mind-map-column:last-child .box-line:before{
        bottom: 0;
    }
    .mind-map-column:last-child .box-line:after{
        height: 0;
    }

寫在最後的話：
這是我第一次發佈文章，不知道有沒有說清楚我想講的東西（糾結臉），而後一寫東西就發現讀書讀少了，原本想針對個別屬性進行下解釋的發現我根本講不出來（講不出來還很少查官方文檔多讀書）。這個文檔或者對有些人來講不實用以爲沒價值，可是畢竟是我想了的、思考了的、花了時間的，仍是想記錄下來講不定走運還能幫到一兩我的呢。

很是感謝閱讀！若你們發現有問題或者更好的思路看法歡迎指出，謝謝！