Размер родительского элемента не соответствует детскому заполнению

Question

http://codepen.io/anon/pen/Keisz/ <- простой пример

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

Применение

box-sizing:border-box;

Для дочернего элемента - это не то, что я хочу. Я хочу, чтобы родитель изменил размер на дочерний, а не наоборот.

Любая помощь, которую вы могли бы оказать, была бы очень признательна!

РЕДАКТИРОВАТЬ: Я думаю, что есть некоторая путаница. Я хочу, чтобы родительский элемент динамически изменял размер, чтобы он содержал наибольшую ширину дочернего элемента + заполнение. К сожалению, максимальная высота также является обязательным требованием. :(

html css

1

Fedoranimus 3 Апр 2014 в 00:46

Я думаю, вам нужно установить position:relative для родителя. Или, может быть, ребенок... float:left тоже может помочь, или и то, и другое.

–

Medda86

3 Апр 2014 в 00:52

Answer 1

Удалите атрибуты высоты и ширины из содержимого div. Вуаля

http://codepen.io/anon/pen/pluAk/

2

JoyalToTheWorld 3 Апр 2014 в 02:29

Это прекрасно работает, но почему это работает? Это кажется нелогичным.

–

Fedoranimus

3 Апр 2014 в 16:53

Answer 2

Если вы не примените box-sizing:border-box;, родительский элемент не будет учитывать отступы при переносе вокруг дочерних div. Вам нужно применить этот стиль. В противном случае опубликованный вами код работает нормально (он игнорирует отступы 20 пикселей на самом внутреннем div, а родительский элемент оборачивается по ширине дочернего div за вычетом отступов на w дочернем div).

Просто удалите max-height из родительского div, и все готово

0

Anubhav 3 Апр 2014 в 00:53

Не могли бы вы дать мне скрипку, пожалуйста? Я не могу воспроизвести ваши результаты. Спасибо.

–

Fedoranimus

3 Апр 2014 в 01:08

Answer 3

Не уверен, какова конечная цель, почему вы это делаете, но предполагая, что это поможет, это идея

#innerContainer {
    display: block;
    overflow: hidden;

}

< EM> FIDDLE

0

LOTUSMS 3 Апр 2014 в 00:59

Размер родительского элемента не соответствует детскому заполнению

3 ответа

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

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

html