Родительский div расширяется по высоте, даже если у дочернего элемента нет высоты

Question

При принудительном выравнивании строки текста или встроенных элементов внутри своего родителя путем добавления правила ::after я заметил, что родитель будет расширяться по высоте, чтобы соответствовать псевдоэлементу, даже если я попытаюсь предотвратить это. :

.test {
    background-color:#ccc;
    text-align:justify;
}
.test:after {
    display:inline-block;
    content:'';
    width:100%;
    height:0;
}

<div class="test">test 1 foo bar</div>

http://jsfiddle.net/f4d7mr5t/

Вот что я пробовал до сих пор и что мне это дало (в порядке возрастания отчаяния):

height:0 на псевдоэлементе: без изменений
line-height:0 на псевдоэлементе: без изменений
overflow:hidden на псевдоэлементе: без изменений
комбинация 2 или всех вышеперечисленных: без изменений
отрицательное поле или заполнение псевдоэлемента: без изменений (отрицательное заполнение недопустимо, насколько я знаю, но в этот момент я начал впадать в отчаяние)
white-space:nowrap на псевдоэлементе: без изменений
white-space:nowrap на родительском элементе: сломал макет
position:relative;top:-100% на псевдоэлементе: без изменений
position:absolute на псевдоэлементе: сломал макет

Любые предложения, кроме предоставления родителю фиксированной высоты или использования flexbox?

html css

1

mmgross 24 Янв 2015 в 02:14

2

Проблема и решение по следующей ссылке: stackoverflow.com/questions/11589590/…

–

Reenactor Rob

24 Янв 2015 в 02:26

Спасибо, это ответ на мой вопрос. Решение не такое красивое, как мне бы хотелось (на самом деле это просто хак, чтобы обойти указание явной высоты), но оно должно быть сделано, поскольку, по-видимому, пока нет хорошего кросс-браузерного решения.

–

mmgross

24 Янв 2015 в 02:45

Answer 1

Единственный способ, которым я знаю, как решить выравнивание одной строки текста, - это установить высоту и высоту строки:

.test {
    background-color:#ccc;
    text-align:justify;
    height: 1em;
    line-height: 1;
}
.test:after {
    display:inline-block;
    content:'';
    width:100%;
}

0

Estevan Maito 24 Янв 2015 в 02:37

1

На самом деле, я имел в виду явную высоту, извините за неудачный выбор слов, но ответ на мой вопрос был дан в комментарии ниже.

–

mmgross

24 Янв 2015 в 02:46

Answer 2

Ваша проблема связана с display: inline-block в псевдоэлементе :after. Поскольку это встроенный элемент, вы также видите некоторые эффекты от пробела. Если вы измените его на display: block, все будет работать как положено.

0

2C-B 24 Янв 2015 в 03:28

1

text-align:justify, очевидно, не работает с нестрочными элементами (я все равно попробовал, если ошибся). Так что нет, это не работает.

–

mmgross

24 Янв 2015 в 03:38

Родительский div расширяется по высоте, даже если у дочернего элемента нет высоты

2 ответа

Похожие вопросы

Связанные вопросы

Новые вопросы

html