как растянуть div по ширине другого дива без js

Статус
В этой теме нельзя размещать новые ответы.

dandandan

Мой дом здесь!
Регистрация
7 Авг 2008
Сообщения
1.036
Реакции
292
как растянуть div по высоте другого дива без js

Верстаю шаблон.
Вот кусок html кода.
на картинке начинается с красной стрелки.
Код:
<div class="left85"><img src="images/07.jpg" width="100%" alt="фокусы" /><div>
<div class="right15">&nbsp;<div>

<div class="clear"></div>

<div class="left80"><img src="images/08.jpg" width="100%" alt="фокус" /><div>
<div class="right20">&nbsp;<div>

Код:
div.left85{
	float:left;
	width:85%;
	}	
div.right15 {
        float:right;
	width:15%;
        background:#0e3206 url(images/grin.gif) repeat;
	}
div.left80{
	float:left;
	width:80%;
	}	
div.right20 {
        float:right;
	width:20%;
        background:#0e3206 url(images/grin.gif) repeat;
	}
div.clear{
	clear:both;
	}
Фотографии растягиваются по ширине на 100% от ширины дива, а вот высота фотки при этом неизвестна и равна X на рисунке. В результате получается так, что задний фон у дивов шириной 15% не окрашивается, т.к., видимо высоту нужно как-то задать. Если внутри дива поместить &nbsp;, то див, шириной 15% закрашивается на одну строку.
Аналогично получилось и при ширине 80 и 20%.

Как залить зеленым цветом задний фон у дива шириной 15 и 20 % (выделен пунктирными рамочками)? Я так поинимаю, что надо как-то его растянуть. Тогда как его растянуть до ширины другого дива?

 
Вот было простое решение двух блоков одинаковой высоты с четко понятным примером: Для просмотра ссылки Войди или Зарегистрируйся
Но я предпочитаю для таких целей таблицы... Так на много проще.
 
В результате получается так, что задний фон у дивов шириной 15% не окрашивается, т.к., видимо высоту нужно как-то задать.

я не уверен, но попробуй перед закрытием этого дива вставить <br style="display:block; clear:both" />
 
я не уверен, но попробуй перед закрытием этого дива вставить <br style="display:block; clear:both" />
А почему именно br ? ты ж говрил, что можно к любому тэгу слеар привязать... а тут ты br. Почему?
 
вот решение:
Код:
<div class="left85">
[INDENT]<img src="images/07.jpg" alt="фокусы" />
<div class="right15"><div>[/INDENT]
<div>
<br class="brc" />
<div class="left80">
[INDENT]<img src="images/08.jpg" alt="фокус" />
<div class="right20"><div>[/INDENT]
<div>
<style>
.brc{ clear: both; }
div.left85{ 
[INDENT]float:left; 
width: 100%; 
position: relative; [/INDENT]
}
div.left85 img{ width: 85%; }
div.right15 {
[INDENT]position: absolute;
right: 0;
top: 0;
height: 100%;
background:#0e3206 url(images/grin.gif) repeat;[/INDENT]
}
div.left80{
[INDENT]float:left; 
width: 100%; 
position: relative; [/INDENT]
}
div.left80 img{ width: 80%; }
div.right20 {
[INDENT]position: absolute;
right: 0;
top: 0;
height: 100%;
background:#0e3206 url(images/grin.gif) repeat;[/INDENT]
}
</style>

А почему именно br ? ты ж говрил, что можно к любому тэгу слеар привязать... а тут ты br. Почему?
Это не правильно с точки зрения семантики, div сделан чтобы что-нибуль в него помещать, а здесь его используют просто для перевода строки и отмены обтекания.
 
Это не правильно с точки зрения семантики
с семантикой по полной дружить - до старости без седых можно и не дожить.

Насчет br - можно все что угодно использовать: div, br, i. С br конечно в IE проблемы возникают, но его более семантично как было указано использовать (типа перевод каретки просто).

А вобще в CSS2 можно и без <br style='clear:both'> можно обходится.
 
а таблицами быстрее . Но дивами типа круче. типа семантичнее. а для seo пофигу. а для обеспечения просмотра в старых браузерах - таблицы тоже меньше гемора вызовут. Но дивами все равно круче. ЗА крутость надо платить - хаками и литрами пива. Проверено.
 
  • Заблокирован
  • #8
что вы так зациклились на дивы? с таблицами много легче
 
Воспользовался этой ссылокой.

внутри ссылки были еще несколько ссылок на варианты. Вот одна из этих ссылок привела к понравившемуся мне решению. Решение кроссбраузерное, подходит для разного кол-ва колонок, без хаков. Вот она. см. ниже.
 
Решение кроссбраузерное, подходит для разного кол-ва колонок, без хаков.

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