html - bootstrap css，固定长度的左边边框

Question

我正在设计一个需要三列的页面，每列的左侧应该有一条垂直线，总共三行，它们的长度应该相同。

我正在尝试使用 border-left css 指令来实现它，但是我的三行获取了包含它们的 div 的高度，并且它们的长度不同。

如果列太长，我希望行比列短，如果列太短，我希望行比列短。

请看 fiddle https://jsfiddle.net/DTcHh/18127/我希望这三行大小相等，比如 100px。

我得到的是:

.border-left {
  border-left: solid 2px;
}

有什么想法吗？

我应该为线条使用 SVG 吗？

谢谢，朱利奥

Answer 1

您可以使用伪元素来获得所需的行为。

* {
  box-sizing: border-box;
}
.container {
  width: 500px;
  margin: 0 auto;
  padding: 0 20px;
}
.row {
  margin-left: -20px; 
  margin-right: -20px;
}

.col-xs-4 {
  float: left;
  padding-left: 20px;
  padding-right: 20px;
  width: 33.33%;
}

.col-w-line {
  position: relative;
  min-height: 100px;
}

.col-w-line::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100px;
  background: #999;
}

<div class="container">
  <div class="row">
    <div class="col-xs-4 col-w-line">Lorem ipsum dolor sit amet.</div>
  
    <div class="col-xs-4 col-w-line">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit.</div>
  
    <div class="col-xs-4 col-w-line">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </div>
 </div>
</div>