Question

HTML code：

<div class="program-contents">

   <div class="program-item"> ... </div>
   <div class="program-item"> ... </div>
   ...
   <div class="program-item"> ... </div>

</div>

.program-contents的样式：

margin-left: 25px;
margin-top: -35px;
padding: 35px 25px 0 25px;
border-left: 2px solid #e2e0e0;

.program-contents 的 border-left 如何设置高度 90 ％？我正在尝试不显示.bogram-contents的border-left 的底部部分。这块需要90％的“border-left”高度。

Answer 1

您可以尝试使用伪元素。 Here's how：

.program-contents {
    height: 300px;
    width: 300px;
    background-color: #EEE;

}

.program-contents::before {
    display: block;
    height: 90%;
    content: ' ';
    border-left: 1px #AAA solid;
}

:before伪元素可用于在元素的内容之前插入生成的内容。我将其高度设置为其父级的90％（即.program-contents），然后向其添加左边框。

如果您需要将边框垂直居中，则可以添加top: 5%。某事like this：

.program-contents::before {    
    position: relative;
    top: 5%;
    display: block;
    height: 90%;
    content: ' ';
    border-left: 1px #AAA solid;
}

设置边框左侧的高度

1 个答案: