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;
    }

写在最后的话：
这是我第一次发布文章，不知道有没有说清楚我想讲的东西（纠结脸），然后一写东西就发现读书读少了，本来想针对个别属性进行下解释的发现我根本讲不出来（讲不出来还不多查官方文档多读书）。这个文档或者对有些人来说不实用觉得没价值，但是毕竟是我想了的、思考了的、花了时间的，还是想记录下来说不定走运还能帮到一两个人呢。

非常感谢阅读！若大家发现有问题或者更好的思路见解欢迎指出，谢谢！