CSS: имейте отделение после абсолютного расположенного отделения
Я задавался вопросом, как сделать это, моя текущая метка - следующие:
<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 тег не появляется подо всеми ими отделение в браузере. Какие-либо идеи, как я могу сделать это?
Спасибо, ребята
3 ответа
Div playArea в этом случае не будет автоматически расширяться по ширине / высоте, чтобы соответствовать элементам внутри, и, поскольку для него не определена высота, он рассматривается как не занимающий место (что означает что тег
появится в том же месте, что и div).
Если вы не знаете заранее размеры div playArea или они могут измениться, было бы лучше разместить элементы, используя float, clear и margin, чтобы получить тот же макет, что и у вас в настоящее время.
Если вы еще этого не сделали, установите плагин Firebug для Firefox - это сделает вашу жизнь с CSS бесконечно проще , так как вы можете редактировать CSS и видеть изменения на лету. Однако не забудьте протестировать и в других браузерах.
Edit: Here ' s пример, сделанный с помощью 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>
Если вы используете абсолютное позиционирование, но не знаете высоту того, что вы позиционируете, то это проблема, которую HTML не очень хорошо решает. Я видел (и, вероятно, написал) хаки, где JavaScript используется для позиционирования элемента, основанного на смещенииHeight другого.
Но, возможно, лучше использовать свойство CSS float, а не абсолютное позиционирование. float и clear довольно хорошо подходят для позиционирования таких вещей, как вы хотите, не жертвуя автоматическим потоком страниц.
Вам нужно будет задать для playArea значение высоты, абсолютные divs не будут расширять родителя
.