Question

我正在构建一个我需要三列的页面，并且每个列的左边应该有一条垂直线，总共三行，它们都应该具有相同的长度。

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

如果列太长，我希望这些行比列更短，如果它们很短，我希望它们更短。

请看一下小提琴https://jsfiddle.net/DTcHh/18127/我希望三条线的大小相同，比如100px。

我正在接受以下行：

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

有什么想法吗？

我应该使用SVG作为行吗？

谢谢，朱利奥

Answer 1

实际上，这条线可以是一个由div背景产生的长矩形。

＆＃13;

body {
  width: 100%;
  height: 100vh;
  margin: 0px;
  text-align: justify;
}

#container {
  width:100%;
  height:100%;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  border: 4px double black;
  box-sizing: border-box;
}

#a {
  padding: 10px;
  box-sizing: border-box;
  background: HoneyDew;
  height: 100%;
  width: 33.3%;  
}

#b {
padding: 10px;
box-sizing: border-box;
background: Lavender;
height: 100%;
width: 33.3%;  
}

#c {
  padding: 10px;
  box-sizing: border-box;
  background: PaleGoldenRod;
  height: 100%;
  width: 33.3%;  
}

.line {
  float: left;
  display: inline-block;
  height: 100%;
  width: 3px;
  background: black;
  margin-right: 10px;
  opacity: 0.9;
}

#a::first-letter, #b::first-letter, #c::first-letter {
  font-size: 2em;
  font-weight: bold;
  margin-left: 10px;
  margin-right: 1px;
}

＆＃13;

<div id=container>
  
<div id=a>
<div class=line></div><span>Small text small text small text small text small text small text small text small text small text small text small text small text.</span>
</div>
  
<div id=b>
<div class=line></div><span>Medium text medium text medium text medium text medium text medium text medium text medium text medium text medium text medium text.</span>
</div>
  
<div id=c>
<div class=line></div><span>Long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text.</span>
</div>

</div>

＆＃13;

Answer 2

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

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

bootstrap css，固定长度的左边界

2 个答案: