Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Высота блок по высоте обтекаемой картинки 
V
    Опции темы
BuShaRt
Дата 21.1.2011, 15:46 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1391
Регистрация: 29.6.2006

Репутация: нет
Всего: 6



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

<ul>
    <li style="border: 1px solid #000;">
        <img src="img.gif" style="float: left; margin: 3px;"><p>text</p>
    </li>
</ul>

PM MAIL   Вверх
mcTep
Дата 21.1.2011, 16:03 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 203
Регистрация: 25.2.2009

Репутация: 3
Всего: 6



Код

<ul>
    <li style="border: 1px solid #000; overflow: hidden;">
        <img src="img.gif" style="float: left; margin: 3px;"><p>text</p>
    </li>
</ul>


Если DOCTYPE не задан (и при каких-то конкретных доктайпах, точно не помню), то для ИЕ6 надо еще "zoom:1;" в li прописать.

Это сообщение отредактировал(а) mcTep - 21.1.2011, 16:04
PM MAIL   Вверх
BuShaRt
Дата 21.1.2011, 16:15 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1391
Регистрация: 29.6.2006

Репутация: нет
Всего: 6



Цитата(mcTep @  21.1.2011,  16:03 Найти цитируемый пост)
Если DOCTYPE не задан (и при каких-то конкретных доктайпах, точно не помню), то для ИЕ6 надо еще "zoom:1;" в li прописать.

Я очень благодарен за совет, но думаю это совсем не по теме.

Добавлено через 13 минут и 45 секунд
Господи, как все оказалось просто. Надо просто элементу-обертке задать overflow:hidden;
PM MAIL   Вверх
mcTep
Дата 21.1.2011, 16:32 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 203
Регистрация: 25.2.2009

Репутация: 3
Всего: 6



Цитата(BuShaRt @  21.1.2011,  16:15 Найти цитируемый пост)
Господи, как все оказалось просто. Надо просто элементу-обертке задать overflow:hidden; 


В моем ответе так и было. Сорри, надо было как то это выделить. smile
PM MAIL   Вверх
BuShaRt
Дата 23.1.2011, 21:10 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1391
Регистрация: 29.6.2006

Репутация: нет
Всего: 6



mcTep, Извиняюсь, не заметил. =)
PM MAIL   Вверх
cccr85
Дата 24.1.2011, 07:56 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 43
Регистрация: 13.7.2010

Репутация: нет
Всего: 2



Я думаю картинке надо задавать размер. Это хороший тон! 
PM MAIL   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.0927 ]   [ Использовано запросов: 20 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.