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

Тема в разделе "Веб-дизайн", создана пользователем dandandan, 4 окт 2009.

Статус темы:
Закрыта.
Модераторы: zek24
  1. dandandan

    dandandan

    Регистр.:
    7 авг 2008
    Сообщения:
    990
    Симпатии:
    267
    как растянуть 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 % (выделен пунктирными рамочками)? Я так поинимаю, что надо как-то его растянуть. Тогда как его растянуть до ширины другого дива?

    [​IMG]
     
  2. OverFade

    OverFade Создатель

    Регистр.:
    4 авг 2009
    Сообщения:
    15
    Симпатии:
    2
    Вот было простое решение двух блоков одинаковой высоты с четко понятным примером: http://chikuyonok.ru/2009/06/float-columns/
    Но я предпочитаю для таких целей таблицы... Так на много проще.
     
    dandandan нравится это.
  3. капрал

    капрал

    Регистр.:
    2 окт 2008
    Сообщения:
    336
    Симпатии:
    45
    я не уверен, но попробуй перед закрытием этого дива вставить <br style="display:block; clear:both" />
     
  4. rafic

    rafic

    Регистр.:
    14 май 2008
    Сообщения:
    477
    Симпатии:
    24
    А почему именно br ? ты ж говрил, что можно к любому тэгу слеар привязать... а тут ты br. Почему?
     
  5. _axl

    _axl Постоялец

    Регистр.:
    24 сен 2008
    Сообщения:
    50
    Симпатии:
    8
    вот решение:
    Код:
    <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>
    
    Это не правильно с точки зрения семантики, div сделан чтобы что-нибуль в него помещать, а здесь его используют просто для перевода строки и отмены обтекания.
     
  6. капрал

    капрал

    Регистр.:
    2 окт 2008
    Сообщения:
    336
    Симпатии:
    45
    с семантикой по полной дружить - до старости без седых можно и не дожить.

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

    А вобще в CSS2 можно и без <br style='clear:both'> можно обходится.
     
  7. Tau

    Tau Постоялец

    Регистр.:
    21 сен 2006
    Сообщения:
    58
    Симпатии:
    10
    а таблицами быстрее . Но дивами типа круче. типа семантичнее. а для seo пофигу. а для обеспечения просмотра в старых браузерах - таблицы тоже меньше гемора вызовут. Но дивами все равно круче. ЗА крутость надо платить - хаками и литрами пива. Проверено.
     
  8. vindozo

    vindozo Читатель

    Заблокирован
    Регистр.:
    12 сен 2009
    Сообщения:
    4
    Симпатии:
    0
    что вы так зациклились на дивы? с таблицами много легче
     
  9. dandandan

    dandandan

    Регистр.:
    7 авг 2008
    Сообщения:
    990
    Симпатии:
    267
    Воспользовался этой ссылокой.
    http://chikuyonok.ru/2009/06/float-columns/
    внутри ссылки были еще несколько ссылок на варианты. Вот одна из этих ссылок привела к понравившемуся мне решению. Решение кроссбраузерное, подходит для разного кол-ва колонок, без хаков. Вот она. см. ниже.
    http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
     
  10. капрал

    капрал

    Регистр.:
    2 окт 2008
    Сообщения:
    336
    Симпатии:
    45
    м-м-м... это больше подходит когда у колонки простая заливка цветом. если надо сделать какой-то более сложный бэкграунд то лучше контейнеру, удерживающему все колонки прописать повтороящийся отрезок бекграунда с полями под колонки.
     
Статус темы:
Закрыта.