CSS & Nested Divs - Родительский Div не будет принимать дочернюю высоту, переполнение: автоматическое исправление
Контекст:
Я создаю список участников для использования с jQuery или PhP для моей ролевой игры Star Trek Fleet (всезнайка, да, я знаю). Мне нужно, чтобы мои div'ы вели себя определенным образом, чтобы сделать его достаточно надежным для извлечения из XML и создания списка автоматически, а также автоматического изменения размера моих div'ов, чтобы добавить сколько угодно имен.
Это поможет взглянуть на мой текущий пример сборки с Firebug / тому подобное, чтобы понять, что я делаю.
Требования:
В каждом подразделе (Outpost Personnel, Outpost Defense) должно быть несколько делений:
1) Фоновое изображение и контейнер подраздела (в этом примере div id= outpostPersonnel)
2) Подраздел контейнера для каждой стороны списка, слева и справа. (Вспомните газетный абзац.)
3) Верхнее число имен списка, необходимых для заполнения / выравнивания этого фонового изображения в требовании 1. (div id= initialCommandTags (листинг слева) и initialPersonnelTags (листинг справа))
4) Div, который растягивается с n количеством дополнительных имен в реестре. (div id = overflowCommandTags, overflowPersonnelTags,)
5) Цветная полоса div, чтобы она выглядела так, как будто LCARS по-прежнему инкапсулирует n номеров имен из требования 4. (div id = colorStretchLeft)
Эта проблема:
Я не могу получить родительский подраздел - div от 1 (outpostPersonnel), чтобы точно придерживаться высоты ВСЕХ его дочерних div-ов - вплоть до высоты overflowCommandTags / overflowPersonnelTags div.
Один способ, которым я попробовал, и следующий подраздел (Outpost Defense) перекрывает div overCommandTags. Другой способ, которым я сейчас пользуюсь (и где я отказался), помещает пустое пространство высотой ~160 пикселей между концом элемента div overflowTags и верхом следующего подраздела (outpostDefense).
Если вы запустите мой текущий пример сборки, вы увидите, что родительский div (outpostPersonnel) расширяет границы, хотя ни один из его дочерних div ов не имеет такого высокого роста.
Переполнение: auto и Overflow: hidden НЕ являются жизнеспособными решениями, поскольку я прочитал, поскольку мне нужно, чтобы div полностью раскрылся, и БЕЗ полосы прокрутки.
Я полностью в тупике. Посмотрите, как это будет действительно простым решением. Это как-то связано с тем, что родительский div - это только BG, в то время как дочерние div имеют фактическое содержимое?
Спасибо, что терпели меня так далеко! Ура!
((Также причина, по которой мои вещи в стиле div встроены, заключается в том, что я встраиваю это в страницу Enjin и не могу вызвать файл *.css.))
1 ответ
Здесь нужно упомянуть несколько вещей, но я начну с причины разрыва между двумя разделами.
Из того, что я вижу по вашим встроенным стилям, которые вы использовали position: relative и меняется top а такжеleft значения для достижения желаемого макета. На элемент с идентификатором personnelContainer ты добавил top: -230px, Это то, что вызывает разрыв.
Когда вы позиционируете элемент относительно, вы должны представить, что элемент находится в исходном положении, и вы просто визуально переместили его. Другими словами, перемещение элемента не меняет поток страницы, поэтому применение отрицательного верхнего значения, как в вашем примере, не изменит высоту контейнера. (хорошая ссылка: http://reference.sitepoint.com/css/relativepositioning)
Имея это в виду, вы можете пойти по пути применения минус top значения для каждого из следующих разделов, чтобы сократить разрыв, однако вы, вероятно, обнаружите, что это еще больше усложняет ситуацию и приводит к дублированию контента.
Лучший совет, который я могу дать, это прочитать следующие статьи о плавающих макетах:
http://css-tricks.com/all-about-floats/
http://www.quirksmode.org/css/clearing.html
Относительное позиционирование имеет свои приложения, но в этом случае вы должны использовать float свойство для достижения вашего макета. Если вы прочитаете статьи выше, это даст вам хорошее представление о плавающих макетах и о том, как убедиться, что ваши разделы содержат все правильно. Пока вы не установите фиксированную высоту ни для одного из дочерних элементов, вы обнаружите, что они расширяются, чтобы вместить любое количество контента.