Подтвердить что ты не робот

CSS: есть div после абсолютного позиционированного div

Мне было интересно, как это сделать, моя текущая отметка выглядит следующим образом:

<div id="playArea" style="position: relative;">
    <div id="widget1" class="widget" style="position: absolute; left: 295px; top: -1px; width: 313px; height: 269px;">Hello</div>
    <div id="widget2" class="widget" style="position: absolute; left: 63px; top: 35px; width: 80px; height: 42px;">World</div>
    <div style="position: absolute; left: 534px; top: 329px; width: 183px; height: 251px;">Bye</div>
</div>

Теперь, если я создаю тег абзаца после последнего </div>, содержимое тега p не отображается под всеми этими div в браузере. Любые идеи, как я могу это сделать?

Спасибо, ребята,

4b9b3361

ОТВЕТЫ

Ответ 1

Если вы используете абсолютное позиционирование, но не знаете высоту того, что вы позиционируете, проблема в том, что HTML не очень хорошо разбирается. Я видел (и, вероятно, написанные) хаки, где JavaScript используется для размещения элемента на основе offsetHeight другого.

Но вам может быть лучше использовать свойство CSS float вместо абсолютного позиционирования. float и clear довольно хороши для позиционирования таких вещей, как вы хотите, не жертвуя автоматическим потоком страниц.

Ответ 2

Вам нужно будет дать playArea значение высоты, абсолютные divs не будут расширять родительский

Ответ 3

В этом случае div в playArea не будет автоматически расширяться по ширине/высоте, чтобы соответствовать элементам внутри, и поскольку он не имеет определенной высоты, он рассматривается как не занимающий никакой комнаты (что означает, что тег

отображаются в том же месте, что и div).

Если вы не знаете размеры div в игровом поле перед рукой или, скорее всего, измените, лучше было бы компоновать свои элементы с помощью float, clear и margin для достижения того же самого макета, который у вас есть.

Если вы еще этого не сделали, подключите Firebug для Firefox - это сделает вашу жизнь CSS бесконечно проще, так как вы можете редактировать CSS и просматривать изменения "на лету". Однако не забудьте проверить и в других браузерах.

Изменить: Здесь пример, выполненный с помощью float (сделал это в спешке, поэтому может быть не идеально)

<div id="playArea" style="float: left;">
    <div id="widget2" class="widget" style="background-color: green; float: left; margin-left: 63px; margin-top: 35px; width: 80px; height: 42px;">World</div>
    <div id="widget1" class="widget" style="background-color: red; float: left; margin-left: 152px; margin-top: -1px; width: 313px; height: 269px;">Hello</div>
    <div style="background-color: blue; float: left; clear: left; margin-left: 534px; margin-top: 26px; width: 183px; height: 251px;">Bye</div>
</div>
<p style="clear: both; float: left;">Test P Element</p>

Ответ 4

Поскольку абсолютно позиционированные элементы не "заполняют" поле div игры, высота и ширина, которые вы назначаете каждому дочернему div, не расширяют playArea высоту и ширину. Я не уверен, какова конечная проблема, которую вы пытаетесь решить, но из имен ваших идентификаторов вы пытаетесь расположить элементы в области "холст". Это хорошо.

Высоты и ширины абсолютно позиционированных divs, опять же, не влияют на размеры div игры, но, зная высоты и ширину, вы можете сказать playArea, каковы ее размеры. В этом случае, давая playArea ширину 580px и высоту 785px, позиция p будет правильно установлена.

Возвращаясь к вашим идентификаторам снова, полезно четко определить размеры всего, как playArea, где содержащиеся элементы не выложены, как обычные элементы страницы (абсолютно позиционированные или нет). Таким образом, у вас будет более предсказуемый макет.