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%;
}

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

为了做到这一点，你需要为.container添加一些填充：http://jsfiddle.net/VKqEU/127/

.container{ display : table; border : 1px solid blue; padding: 10% 0; }

Answer 3

.container{
   display : table;
    border : 1px solid blue;
    height:150px;
}

.line:after {
    content:"";
    position: absolute;
    top:20px;
    bottom:0;
    left: 50%;
    height:120px;
    border-right: 2px dotted #ff0000;
}

<强> FIDDLE

http://jsfiddle.net/VKqEU/135/

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

3 个答案: