我对某些产品有一些隐秘的命名标签,我想用一个带有突破标签的图解释它们,类似的东西：
也就是说,我有一些长而神秘的标签(在这个例子中是“A-253-QZ”,在现实世界中通常有8-10-12个组件),我需要解释它的部分,“A”是指系列代号,“253”是例如“最大速度”,“QZ”是可接受的电池类型.
我需要生成这些图表,所以我更喜欢用HTML CSS进行布局.
到目前为止,我的最大努力是一个复杂的表格,它使用其边框绘制这些突破线 – JSBin.它看起来像：
我知道这是非常不理想的：
>它使用HTML表进行格式化,那就是恶意
>垂直线是正确居中的,但它会产生地狱的一列
>水平线不对准线的中心,而是与其底部对齐
水平线不会触及说明字幕的末尾
任何想法如何更好地/没有表/修复提到的问题？任何关于更好地表征概念的想法？
解决方法
这是我的尝试.只是想成为语义,尽可能少的额外元素
.container {
width: 400px;
height: 200px;
}
.container * {
display: inline-block;
float: left;
margin: 4px;
position: relative;
}
.item:first-of-type {
margin-left: 200px;
}
.item:before {
content: attr(data-label);
text-align: right;
position: absolute;
right: calc(100% + 10px);
height: 30px;
width: 200px;
}
.item:nth-of-type(1):before {
bottom: -50px;
}
.item:nth-of-type(2):before {
bottom: -80px;
}
.item:nth-of-type(3):before {
bottom: -110px;
}
.item:after {
content: "";
position: absolute;
width: 100%;
left: 0px;
Box-shadow: inset 0px 2px 0px blue;
background-image: linear-gradient(blue,blue),linear-gradient(blue,blue);
background-position: 50% 0%,0% calc(100% - 10px);
background-size: 2px calc(100% - 10px),50% 2px;
background-repeat: no-repeat;
}
.item:nth-of-type(1):after {
top: 30px;
height: 30px;
z-index: -1;
}
.item:nth-of-type(2):after {
top: 30px;
height: 60px;
z-index: -2;
}
.item:nth-of-type(3):after {
top: 30px;
height: 90px;
z-index: -3;
}
<div class="container">
<div class="item" data-label="Category 1">FIRST</div>
<p>-</p>
<div class="item" data-label="Category 2">SEC</div>
<p>-</p>
<div class="item" data-label="Category 3">THIRD</div>
</div>
另一个例子,好一点,并收缩包装容器.
伪元素不再是绝对定位的,所以容器可以调整大小.并避免一些calc使用,总是比维护比填充更困难.
不过,我仍然需要在手上放置一个填充物.看不到如何避免这个…
.container {
border: solid 1px red;
display: inline-block;
padding-left: 200px;
}
.container * {
display: inline-block;
float: left;
margin: 4px;
position: relative;
}
.item:before {
content: attr(data-label);
text-align: right;
position: absolute;
display: inline-block;
right: 100%;
height: 30px;
width: 200px;
padding-right: 8px;
}
.item:nth-of-type(1):before {
top: 30px;
}
.item:nth-of-type(2):before {
top: 55px;
}
.item:nth-of-type(3):before {
top: 85px;
}
.item:after {
content: "";
display: inline-block;
width: 100%;
left: 0px;
Box-shadow: inset 0px 2px 0px blue;
background-image: linear-gradient(blue,50% 2px;
background-repeat: no-repeat;
}
.item:nth-of-type(1):after {
height: 30px;
}
.item:nth-of-type(2):after {
height: 60px;
}
.item:nth-of-type(3):after {
height: 90px;
}
<div class="container">
<div class="item" data-label="Category 1">FIRST</div>
<p>-</p>
<div class="item" data-label="Category 2">SEC</div>
<p>-</p>
<div class="item" data-label="Category 3">THIRD</div>
</div>
