У меня есть следующее: http://jsfiddle.net/DTyGn/1/
Проблема в том, что синяя линия, проходящая по середине div, должна быть только высотой родителя (.box
), но это невозможно, потому что для .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;
}
Просто добавьте position:relative
вас.box div. Сценарий здесь: http://jsfiddle.net/DTyGn/6/
Добавьте разделитель.inner в оба поля и позицию: относительно.box, и вы должны быть установлены.
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>