Блочная верстка - подскажите
1 повідомлення
#12 років тому
Добрый день, уважаемые специалисты!
Подскажите, есть 2 релативных блока (релативные они потому что внутри них нужно наложить текст на внутренний блок):
<body>
some text here...
<div style="position:relative">
<div style="position:absolute;top:0; background-color:red; width:100%">content<br>of<br>red<br>block<br>here</div>
<div style="position:absolute;top:0;right:0">comment 1 here</div>
</div>
<div style="position:relative">
<div style="position:absolute;top:0; background-color:green; width:100%">content<br>of<br>green<br>block<br>here</div>
<div style="position:absolute;top:0;right:0">comment 2 here</div>
</div>
</body>
Высота у них резиновая.
В текущем исполнении зеленый блок наезжает на красный. Как сделать чтоб блоки располагались друг под другом? (см приложение)
Спасибо.
297 повідомлень
#12 років тому
А обязательно что бы блок с текстом был position:absolute;?<div style="position:absolute;top:0; background-color:red; width:100%">content<br>of<br>red<br>block<br>here</div>
798 повідомлень
#12 років тому
Это конечно ужас полный, но может так?
<body>
some text here...
<div style="position:relative">
<div style=" background-color:red; width:100%">content<br>of<br>red<br>block<br>here</div>
<div style="position:absolute;top:0;right:0">comment 1 here</div>
</div>
<div style="position:relative">
<div style="background-color:green; width:100%">content<br>of<br>green<br>block<br>here</div>
<div style="position:absolute;top:0;right:0">comment 2 here</div>
</div>
</body>
6863 повідомлення
#12 років тому
adeld, блоки накладываются потому, что родительский блок имеет высоту 0 - в нем же все с абсолютом. Вариант b0nn1e будет работать.
1 повідомлення
#12 років тому
Причем здесь absolute, сделай relative, и блоки автоматически будут друг под друга идти.
1807 повідомлень
#12 років тому
adeld, вам для начала надо осмылсить азы, понять что такое абсолют и релатив, и зачем они нужны. Абсолют тут как пятая нога корове....