html - 两个div之间的垂直线限制高度

Question

我正在尝试两个 div 之间的垂直线。但我不希望它与 div 具有相同的高度。我需要比方说从顶部削减 10%，从底部削减 10%。

.container {
  display: table;
  border: 1px solid blue;
}
.line {
  padding-right: 20px;
  border-right: 1px solid #cfc7c0;
}
.first {
  display: table-cell;
  width: 30%;
}
.second {
  display: table-cell;
  width: 30%;
  padding-left: 10px;
}

<div class="container">
  <div class="first line">this is first div and some text</div>
  <div class="second">
    Right
    <br/>and more
    <br/>Side
  </div>
</div>

http://jsfiddle.net/VKqEU/124/

请建议如何实现这一点？

Answer 1

您可以尝试使用 ::after 伪元素。

.line {
    position: relative;
}
.line:after {
    content: '';
    position: absolute;
    right: 0;
    border-right: 1px solid #cfc7c0;
    top: 10%;
    bottom: 10%;
}

.container {
    display: table;
    border: 1px solid blue;
}
.line {
    padding-right: 21px; /* 20+1 */
    position: relative;
}
.line:after {
    content: '';
    position: absolute;
    right: 0;
    border-right: 1px solid #cfc7c0;
    top: 10%;
    bottom: 10%;
}
.first {
    display: table-cell;
    width: 30%;
}
.second {
    display: table-cell;
    width: 30%;
    padding-left: 10px;
}

<div class="container">
    <div class="first line">this is first div and some text</div>
    <div class="second">
        Right
        <br/>and more
        <br/>Side
    </div>
</div>