Унаследовать рост родителя без указания высоты

Question

Унаследовать рост родителя без указания высоты

0

У меня есть следующее: 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;
}

Walter 18 фев. 2014, в 03:14

Источник

Теги:

html

css

css3

2 ответа

0

Добавьте разделитель.inner в оба поля и позицию: относительно.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>

Reza Assar 17 фев. 2014, в 23:44

Ещё вопросы

n1kkou · Accepted Answer · 2014-02-17T22-57-00.000Z

Просто добавьте position:relative вас.box div. Сценарий здесь: http://jsfiddle.net/DTyGn/6/

Я чувствую себя идиотом за то, что упустил такое простое решение. Благодарю. :П