Question

问题是在div中间运行的蓝线应该只是父级（.box）的高度，但这是不可能的，因为.box没有指定的高度，因为高度可能会有所不同。

我该如何解决这个问题？

HTML：

<div class="box">
    Sample text.
</div>
<div class="box">
    Some more text.<br />
    Different height.
</div>

CSS：

.box {
    padding: 50px 0;
    text-align: center;
    border: 1px solid black;
    margin-bottom: 20px;
}

.box:after {
    content: "";
    height: 100%;
    width: 5px;
    background: blue;
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -2.5px;
    z-index: -1;
}

Answer 1

将.inner div添加到两个框和位置：相对于.box，你应该设置。

http://jsfiddle.net/DTyGn/5/

<强> CSS

.box {
    padding: 50px 0;
    text-align: center;
    border: 1px solid black;
    margin-bottom: 20px;
    position:relative;
}

.inner:after {
    content: "";
    height: 100%;
    width: 5px;
    background: blue;
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -2.5px;
    z-index: -1;
}

<强> HTML

<div class="box">
  <div class="inner">
    Sample text.
  </div>
</div>
<div class="box">
  <div class="inner">
    Some more text.<br />
    Different height.
  </div>
</div>

Answer 2

只需将position:relative添加到.box div即可。在这里小提琴：http://jsfiddle.net/DTyGn/6/

在未指定高度的情况下继承父级的高度

2 个答案: