具有突破标签解释的具有挑战性的图解

Question

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

也就是说，我有一些长而神秘的标签（＆＃34; A-253-QZ＆＃34;在这个例子中，在现实世界中通常有8-10-12个组件），我需要解释它的部分，＆＃34; A＆＃34;指系列指示符，＆＃34; 253＆＃34;例如，＆＃34;最大速度＆＃34;和＆＃34; QZ＆＃34;是可接受的电池类型。

我需要动态生成这些图表，因此我更倾向于使用HTML + CSS进行布局。

到目前为止，我的最大努力是使用其边框绘制这些突破线的复杂表格JSBin。它看起来像是：

我知道它非常不理想：

• 它使用HTML表进行格式化，这是邪恶的
• 垂直线正确居中，但它会生成一个列的地狱
• 水平线不对齐线的中心，而是对齐底部
• 水平线不会触及说明标题的末尾

任何想法如何更好/没有表/修复提到的问题？关于更好地表达概念的任何想法？

Answer 1

希望这是体面的！大声笑。试一试，我知道这不是最佳选择：

完整代码

<table class="breakout">
  <tr>
    <td></td>
    <td colspan="2" class="comp label">A</td>
    <td class="label">-</td>
    <td colspan="2" class="comp label">253</td>
    <td class="label">-</td>
    <td colspan="2" class="comp label">QZ</td>
  </tr>
  <tr>
    <td rowspan="2" class="caption">series</td>
    <td class="ruler-hv"></td>
    <td></td>
    <td></td>
    <td class="ruler-v"></td>
    <td></td>
    <td></td>
    <td class="ruler-v"></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td class="ruler-v"></td>
    <td></td>
    <td></td>
    <td class="ruler-v"></td>
    <td></td>
  </tr>
  <tr>
    <td rowspan="2" class="caption">max speed</td>
    <td class="ruler-h"></td>
    <td class="ruler-h"></td>
    <td class="ruler-h"></td>
    <td class="ruler-hv"></td>
    <td></td>
    <td></td>
    <td class="ruler-v"></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td class="ruler-v"></td>
    <td></td>
  </tr>
  <tr>
    <td rowspan="2" class="caption">batteries type</td>
    <td class="ruler-h"></td>
    <td class="ruler-h"></td>
    <td class="ruler-h"></td>
    <td class="ruler-h"></td>
    <td class="ruler-h"></td>
    <td class="ruler-h"></td>
    <td class="ruler-hv"></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

小提琴：http://output.jsbin.com/yalacoceda

Answer 2

您正尝试显示以下信息：

series: A
max-speed: 253
batteries type: QZ

将标记更改为dl, dd and dt是合适的。以下示例以您希望的方式显示数据，但具有以下约束：

• 标签的宽度和高度是固定的
• 值的高度是固定的

＆＃13;

＆＃13;

dl, dt, dd {
  margin: 0;
}
dl {
  padding-top: 48px;
  overflow: hidden;
}
/* labels */
dt {
  float: left;
  clear: left;
  width: 96px;
  line-height: 24px;
  background-color: #FFFFFF;
}
/* values */
dd {
  display: inline-block;
  position: relative;
  top: -48px;
  line-height: 48px;
  border-bottom: 1px solid;
  font-size: 32px;
}
/* connector */
dd::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 100%;
  right: 50%;
  left: -999px;
  border-right: 1px solid;
  border-bottom: 1px solid;
}
dd:nth-of-type(1)::after {
  height: 12px;
}
dd:nth-of-type(2)::after {
  height: 36px;
}
dd:nth-of-type(3)::after {
  height: 60px;
}

＆＃13;

<dl>
  <dt>series</dt>
  <dd>A</dd>
  <dt>max-speed</dt>
  <dd>253</dd>
  <dt>batteries type</dt>
  <dd>QZ</dd>
</dl>

＆＃13;

＆＃13;

＆＃13;

Here is a CodePen使用LESS变量。您可以编辑宽度和高度变量以重新生成CSS。

Answer 3

这是我的尝试。只是尝试语义，尽可能少的额外元素

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

另一个例子，好一点，收缩包装容器。

伪元素不再是绝对定位，因此容器可以调整大小。例如，避免某些计算用途，总是比维护更难维护。

尽管如此，我仍然需要先将填充物设置在容器上。无法避免这种情况......

＆＃13;

＆＃13;

.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, 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 {
  height: 30px;
} 

.item:nth-of-type(2):after {
  height: 60px;
} 

.item:nth-of-type(3):after {
  height: 90px;
} 

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 4

JSFiddle

这是一个不使用<table>的实现：

<style type="text/css">
.tbl {
    display: table;
    border-collapse: collapse;
}

.row {
    display: table-row;
    clear: both;
    border: #DDD solid 1px;
    border-collapse: collapse;
}

.col {
    display: table-cell;
    border: #DDD solid 1px;
    position: relative;
    border-collapse: collapse;
}

.col1 {
    font-size: 20px;
}

.row1 {
    font-size: 42px;
}

.border-bottom-green {
    border-bottom: green solid 1px;
}

.half-v-border {
    display: inline-block;
    width: 1px;
    height: 100%;
    background-color: #DDD;
    left: 50%;
    position: absolute;
    top: 0;
}

.half-h-border {
    display: inline-block;
    width: 100%;
    height: 1px;
    background-color: #DDD;
    position: absolute;
    top: 50%;
}

.half-h-border.colored-bg,
.half-v-border.colored-bg {
    background-color: green;
    z-index: 1000;
}

.first-quarter-border {
    position: absolute;
    height: 50%;
    width: 50%;
    top: 0;
    left: 0;
    border-right: green solid 1px;
    border-bottom: green solid 1px;
}
</style>

<div class="tbl">
    <div class="row row1">
        <div class="col col1"></div>
        <div class="col col2 border-bottom-green">A</div>
        <div class="col col3"> - </div>
        <div class="col col4 border-bottom-green">253</div>
        <div class="col col5"> - </div>
        <div class="col col6 border-bottom-green">QZ</div>
    </div>
    <div class="row row2">
        <div class="col col1">series</div>
        <div class="col col2">
            <div class="half-v-border"></div>
            <div class="half-h-border"></div>
            <div class="first-quarter-border"></div>
        </div>
        <div class="col col3">
            <div class="half-h-border"></div>
        </div>
        <div class="col col4">
            <div class="half-v-border colored-bg"></div>
            <div class="half-h-border"></div>
        </div>
        <div class="col col5">
            <div class="half-h-border"></div>
        </div>
        <div class="col col6">
            <div class="half-v-border colored-bg"></div>
            <div class="half-h-border"></div>
        </div>
    </div>
    <div class="row row3">
        <div class="col col1">max speed</div>
        <div class="col col2">
            <div class="half-v-border"></div>
            <div class="half-h-border colored-bg"></div>
        </div>
        <div class="col col3">
            <div class="half-h-border colored-bg"></div>
        </div>
        <div class="col col4">
            <div class="half-v-border"></div>
            <div class="half-h-border"></div>
            <div class="first-quarter-border"></div>
        </div>
        <div class="col col5">
            <div class="half-h-border"></div>
        </div>
        <div class="col col6">
            <div class="half-v-border colored-bg"></div>
            <div class="half-h-border"></div>
        </div>
    </div>
    <div class="row row3">
        <div class="col col1">batteries type</div>
        <div class="col col2">
            <div class="half-v-border"></div>
            <div class="half-h-border colored-bg"></div>
        </div>
        <div class="col col3">
            <div class="half-h-border colored-bg"></div>
        </div>
        <div class="col col4">
            <div class="half-v-border"></div>
            <div class="half-h-border colored-bg"></div>
        </div>
        <div class="col col5">
            <div class="half-h-border colored-bg"></div>
        </div>
        <div class="col col6">
            <div class="half-v-border"></div>
            <div class="half-h-border"></div>
            <div class="first-quarter-border"></div>
        </div>
    </div>
</div>
<!-- .tbl -->