我怎样才能使左边框不占左边框的 100%，但高度更小？答案

【问题标题】：How can i make a border-left taking not 100% of left border, but smaller in height?我怎样才能使左边框不占左边框的 100%，但高度更小？
【发布时间】：2022-08-09 23:29:14
【问题描述】：

#thirdcolumnfooter {
  vertical-align: top;
  padding-right: 5%;
  display: inline-block;
}

#fourthcolumnfooter {
  padding-left: 5%;
  display: inline-block;
  border-color: #EAAC00;
  border-style: solid;
  border-width: 0px 0px 0px 2px;
}

<div id=\"thirdcolumnfooter\">

  <div class=\"container\">
    <h5>FAST SHIPPING</h5>
  </div>

</div>


<div data-element_type=\"column\" id=\"fourthcolumnfooter\">

  <div class=\"firstrow\">
    <h5>YOUR CART</h5>
  </div>

  <div class=\"secondrow\">
    <span>VIEW CART</span>
  </div>

</div>

在第一张图片上有我现在所拥有的：

在第二张图片上有我想要的 - 可见边框的较小高度，让它为 50%，或者，例如，与具有“第二行”类的 div 的高度相同：

我见过这个问题 - css border-left 50% height 但这不是我的情况......顺便说一句，我无法从代码中删除 padding-right 和 padding-left - 我用它来在列之间添加一些空间。

谢谢

尝试在 .secondrow div 上添加左边框并使用 css 进行调整
这回答了你的问题了吗？ Any way to declare a size/partial border to a box?

标签： html css

【解决方案1】：

这是我的想法，您可以将绝对定位的 div 添加到您想要的高度，然后添加所需的边框。

#thirdcolumnfooter {
  vertical-align: top;
  padding-right: 5%;
  display: inline-block;
}

#fourthcolumnfooter {
  padding-left: 5%;
  display: inline-block;
  position: relative;
}

.temp {
  position: absolute;
  top: 50%;
  bottom: 0;
  left: 0;
  right: 0;
  border-color: #EAAC00;
  border-style: solid;
  border-width: 0px 0px 0px 2px;
}

<div id="thirdcolumnfooter">

  <div class="container">
    <h5>FAST SHIPPING</h5>
  </div>

</div>


<div data-element_type="column" id="fourthcolumnfooter">

  <div class="firstrow">
    <h5>YOUR CART</h5>
  </div>

  <div class="secondrow">
    <span>VIEW CART</span>
  </div>
  <div class="temp"></div>

</div>

【讨论】：