要求

理想情况下，它应该只是一个空div <div class="vr"></div>，并带有一些CSS才能正确设置.vr { ... }的样式。
div应该是线的宽度。
- 例如如果该行的宽度为2px，则div的总宽度应为2px。
它应该具有响应性，并动态填充其父代的身高。
- 即高度不应固定为静态值。
它应该是自包含的，并且不要求元素位于元素的左侧或右侧。
- 例如在上一个元素或下一个元素上不加边框。
它应在IE11 +中工作。
- Flexbox很好，并在下面的示例代码中使用。
它应在大量使用bootstrap和flexbox的应用程序中工作。
没有JavaScript。
- 我对JavaScript感到很满意，并且我有信心可以写一些东西来监视父级，并在父级高度变化时手动设置高度。但这对于“基本”样式/布局是不需要的。

我尝试过的

仅SO方面就有很多建议，甚至更多建议遍布互联网的其余部分。但是这些建议通常是过时的，并且经常使用不灵活的技术。

.vr
- 我天真地以为我可以简单地给div一个border-left，但什么都不会显示。
vr-fixedheight
- 设置一个固定的高度是可行的，但是需要响应以适应将要使用的不同位置。
.vr-100pheight
- 我试图明确地说高度是100％，即使不需要使用flexbox，它仍然没有呈现任何内容。
 
- 我尝试将div的内容设置为 ，但这会在div中创建“死空间”。即该行的宽度为2px，但div的总宽度约为7px。
vr-d-inlineblock
- 建议使用display: inline-block。我认为在flexbox内不要紧，设置它仍然不会渲染线条。

我整理了一个jsFiddle，显示了我尝试过的内容：https://jsfiddle.net/758dn6ph/

这是一段代码粘贴，以防无法使用jsFiddle：

<div class="test d-flex flex-row align-items-center border p-2 bg-dark text-light">
  <span>One</span>
  <div class="vr"></div>
  <span>Two</span>
  <div class="vr-fixedheight"></div>
  <span>Three</span>
  <div class="vr-100pheight"></div>
  <span>Four</span>
  <div class="vr">&nbsp;</div>
  <span>Five</span>
  <div class="vr-d-inlineblock"></div>
  <span>Six</span>
</div>

/* These classes are (failed) attempts at making the VR div "work" */
.vr {
  background: yellow;
  border-left: 2px solid magenta;
}

.vr-fixedheight {
  height: 10px;

  background: yellow;
  border-left: 2px solid magenta;
}

.vr-100pheight {
  height: 100%;

  background: yellow;
  border-left: 2px solid magenta;
}

.vr-d-inlineblock {
  display: inline-block;

  background: yellow;
  border-left: 2px solid magenta;
}

/* These classes a purely for making the example easier to see, and are not part of the VR */

.test span:not(:first-child) {
  margin-left: 5px;
}

.test span:not(:last-child) {
  margin-right: 5px;
}

注意：示例中使用Bootstrap 4和目标应用程序。它已经在jSFiddle中链接了，但是如果使用原始代码，则必须手动将其拉入。

可重复使用的响应式VR（垂直规则）HTML和CSS

要求

我尝试过的

0 个答案: