html5 css3 实现二叉树,vue+js+css怎么实现以下的样式，点击A或者B，出现在右侧的方框中...

之前碰巧做过这种结构的东西，用的flex布局，上下左右四个方向均包含，部分内容不方便截图，仅对于实现的思路说明下，希望对你有帮助

对于你需要的左右结构的二叉树，那么每一级为一层node-wrap,最外层的node-box，使用display:flex; align-items:center;,每一层node-wrap使用flex-direction:column,针对横向的线条，对于每个node-item使用定位，利用伪类显示，而属相的层级的线条，使用node-wrap的伪类，长度需要动态计算 = calc(100% - 上一层第一个高度半值 - 最后一个高度半值)

部分关键代码贴一部分：// Right Nodes Box Stylus

.right-nodes-box {

position: relative;

display: flex;

flex-direction: column;

&::before {

content: "";

position: absolute;

left: 0;

height: calc(100% - #{$node-height} - 80px - 2px);

width: 2px;

background: $border-color;

bottom: ($node-height + 2px + 80px) / 2;

}

.node-wrap {

padding: 40px 0 40px 70px;

flex-direction: row;

&::before {

content: "";

position: absolute;

left: 0;

bottom: calc(50% - 2px);

width: 70px;

height: 2px;

background: #00aaff;

}

&:not(:first-child):not(:last-child) {

.nodes-child-box {

position: relative;

bottom: 0;

}

}

&::after {

content: '';

position: absolute;

left: 40px;

bottom: 50%;

margin-bottom: -8px;

transform: translateX(-50%);

width: 0;

border-color: transparent transparent transparent #00aaff;

border-style: solid;

border-width: 8px 6px 8px;

}

}

&.onlyone {

.node-wrap {

padding-left: 0;

&::before, &::after {

content: none;

}

}

}

}

.node-wrap .right-nodes-box {

position: absolute;

left: $node-width + 100px + 42px;

z-index: -1;

display: flex;

margin-left: 2px;

top: 50%;

transform: translateY(-50%);

}

主要是看你怎么想你的实现思路，针对实现思路再去考虑相应的代码如何去写~

希望对你有帮助~