html – 具有突破标签说明的挑战性图表

发布时间：2020-12-14 18:48:04 所属栏目：资源来源：网络整理

导读：我对某些产品有一些隐秘的命名标签,我想用一个带有突破标签的图解释它们,类似的东西：也就是说,我有一些长而神秘的标签(在这个例子中是“A-253-QZ”,在现实世界中通常有8-10-12个组件),我需要解释它的部分,“A”是指系列代号,“253”是例如“最大速度”,“Q

我对某些产品有一些隐秘的命名标签,我想用一个带有突破标签的图解释它们,类似的东西：

也就是说,我有一些长而神秘的标签(在这个例子中是“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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!