摘要：思路以一个品字为单元，然后考虑如何让他们衔接起来采用的伪类显示线条。主体级级级级级级级方法一实现兼容，更低版本未测试考虑到兼容性，该方法方面采取浮动然后通过计算每一个品的宽度。
开端以下内容纯属个人的一点点或许不大成熟的思考，若大家发现有问题或者更好的思路见解欢迎指出，谢谢大家！
在某一个风和日丽的下午，一个小伙伴小窗我，询问下面这样的分型图，应该用什么思路去实现它。我看到这个图片愣了2秒钟，脑海就冒出一个词——定位，没错就是定位。然后，又花了2秒钟茫然定位是最好的解决办法么？然后愉快的决定动手写一写用定位怎么去实现这个效果（不是要想其他更好的解决办法么..啊喂），一本正经敲代码脸（嗨呀，好气哦，装什么听不到）。
效果图：
感谢brook的提醒加上在线预览地址：
方法一：css+jq实现效果
方法二：flex实现效果
tips：本例只适用于固定一分二这种模式，示例蓝色框定宽定高。
思路：以一个品字为单元，然后考虑如何让他们衔接起来,采用.box-line的伪类显示线条。
主体html:
1级2级2级3级3级3级3级
考虑到兼容性，该方法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:
方法二：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;
}
写在最后的话：
这是我第一次发布文章，不知道有没有说清楚我想讲的东西（纠结脸），然后一写东西就发现读书读少了，本来想针对个别属性进行下解释的发现我根本讲不出来（讲不出来还不多查官方文档多读书）。这个文档或者对有些人来说不实用觉得没价值，但是毕竟是我想了的、思考了的、花了时间的，还是想记录下来说不定走运还能帮到一两个人呢。
非常感谢阅读！若大家发现有问题或者更好的思路见解欢迎指出，谢谢！
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116551.html
摘要：思路以一个品字为单元，然后考虑如何让他们衔接起来采用的伪类显示线条。主体级级级级级级级方法一实现兼容，更低版本未测试考虑到兼容性，该方法方面采取浮动然后通过计算每一个品的宽度。 以下内容纯属个人的一点点或许不大成熟的思考，若大家发现有问题或者更好的思路见解欢迎指出，谢谢大家！ 开端 在某一个风和日丽的下午，一个小伙伴小窗我，询问下面这样的分型图，应该用什么思路去实现它。我看到这个图片愣...
摘要：思路以一个品字为单元，然后考虑如何让他们衔接起来采用的伪类显示线条。主体级级级级级级级方法一实现兼容，更低版本未测试考虑到兼容性，该方法方面采取浮动然后通过计算每一个品的宽度。 以下内容纯属个人的一点点或许不大成熟的思考，若大家发现有问题或者更好的思路见解欢迎指出，谢谢大家！ 开端 在某一个风和日丽的下午，一个小伙伴小窗我，询问下面这样的分型图，应该用什么思路去实现它。我看到这个图片愣...
摘要：相信在分级分权的时代诉求下，聆客企业服务的多租户多层级模式将大有可为。 聆客企业协作平台（BingoLink，下简称聆客）是品高云旗下面向生态型组织的云端协作与开放平台产品。聆客作为SaaS化的企业协作移动平台，在当前在云计算时代的公私混合架构下，各企业客户以独立租户模式存在于平台之上，使用个性化的系统，业务数据相互独立隔离、独立管理。 但对于大型集团企业而言，集团总部与旗下子公司存在...
摘要：书体宋体仿宋体黑体等例如自带的宋体实为中易宋体。传统上说的等线体以当代视角来看通常是较为幼细的黑体。前面的过程我们称之为编码，后面的这个过程我们称之为解码。部分浏览器比如可以选择编码自动检测功能，使用基于统计的方法判断未定编码。 准备工作 字符 - Character 字母、数字、汉字、符号等，是一种抽象实体。 字形 - Glyph 单个「字符」的具体表达，一个字可有多个不同的字形。 ...
阅读 1076·2021-11-22 09:34
阅读 3103·2021-09-29 09:35
阅读 338·2021-09-04 16:40
阅读 2808·2019-08-30 15:53
阅读 2461·2019-08-30 15:44
阅读 2488·2019-08-30 14:10
阅读 1225·2019-08-29 18:43
阅读 2092·2019-08-29 13:26
