css实现“品”字形分级图

以下内容纯属个人的一点点或许不大成熟的思考,若大家发现有问题或者更好的思路见解欢迎指出,谢谢大家!

开端

在某一个风和日丽的下午,一个小伙伴小窗我,询问下面这样的分型图,应该用什么思路去实现它。我看到这个图片愣了2秒钟,脑海就冒出一个词——定位,没错就是定位。然后,又花了2秒钟茫然定位是最好的解决办法么?然后愉快的决定动手写一写用定位怎么去实现这个效果(不是要想其他更好的解决办法么..啊喂),一本正经敲代码脸(嗨呀,好气哦,装什么听不到)。

效果图:

css实现“品”字形分级图

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

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

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

相关推荐