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

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Расположить изображения с подписями в одной строке, <div>, float: left 
:(
    Опции темы
Гриша
Дата 19.9.2007, 16:24 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


НУС(незнаю|узнаю|создаю)
*


Профиль
Группа: Участник
Сообщений: 181
Регистрация: 12.6.2005
Где: Земля, Москва, Хр ущевка

Репутация: нет
Всего: 1
Здравствуйте.

Есть следующая задача: расположить столько изображений с подписями в один ряд сколько уместится в окне броузера (без горизонтальной прокрутки), таким образом, чтобы при уменьшении окна браузера, изображения с подписями которые не умещаются в строке смещались на новую строку.

Вобщем это у меня получается, но есть проблема: 
Объясняю проблему по примеру, html код которого приведу ниже, 
например под вторым изображением (элемент 2) получается 3 строчки текста,
при сужении окна браузера таким образом, чтобы например последнее изображение, неумещалось в строке,
оно оказывается под третьим изображением, а не под первым (т.е. в начале строки), по причине длинной подписи под вторым изображением.

Я могу конечно указать фиксированную границу подписи под изображением (class=element_info), но объем текста там может быть разным,

Код

<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=windows-1251">
</HEAD>
<BODY>

<style type="text/css">
<!--
DIV.element-list {    
}
DIV.element-brief {
    FLOAT: left; WIDTH: 115px;
}
DIV.element-brief DIV.title {
    FONT-WEIGHT: normal
}
DIV.element-brief DIV.element_image {
    HEIGHT: 100px; 
}
DIV.element-brief DIV.element_info {
    PADDING-RIGHT: 2em; OVERFLOW: visible; HEIGHT: 5ex;
}
--></style>

    <DIV class=element-list>

        <DIV class=element-brief >
            <DIV class=element_image><IMG height=100 alt="" width=100 border=0></DIV>
            <DIV class=element_info>Элемент 1</DIV>
        </DIV>

        <DIV class=element-brief>
            <DIV class=element_image><IMG height=100 alt="" width=100 border=0></DIV>
            <DIV class=element_info>Элемент 2 элемент 2 элемент 2.</DIV>
        </DIV>

        <DIV class=element-brief>
            <DIV class=element_image><IMG height=100 alt="" width=100 border=0></DIV>
            <DIV class=element_info>Элемент 3</DIV>
        </DIV>

        <DIV class=element-brief>
            <DIV class=element_image><IMG height=100 alt="" width=100 border=0></DIV>
            <DIV class=element_info>Элемент 4</DIV>
        </DIV>

        <DIV class=element-brief>
            <DIV class=element_image><IMG height=100 alt="" width=100 border=0></DIV>
            <DIV class=element_info>Элемент 5</DIV>
        </DIV>
       </DIV>

</BODY>
</HTML>

--------------------
Если долго мучиться, что-нибудь получитЬся.
PM MAIL WWW   Вверх
Гриша
Дата 21.9.2007, 02:35 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


НУС(незнаю|узнаю|создаю)
*


Профиль
Группа: Участник
Сообщений: 181
Регистрация: 12.6.2005
Где: Земля, Москва, Хр ущевка

Репутация: нет
Всего: 1
Есди проблема нерешаемая, понимающие люди, напишите пожалуйста об этом, а то я кручу верчу с этим решением, незнаю получится или нет, может зря.
--------------------
Если долго мучиться, что-нибудь получитЬся.
PM MAIL WWW   Вверх
dstorm81
Дата 21.9.2007, 10:53 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


бездельник
***


Профиль
Группа: Завсегдатай
Сообщений: 1178
Регистрация: 18.1.2006
Где: (16RU)

Репутация: 3
Всего: 39
2 Гриша
какое-то смутное подозрение что не получится, ибо один блок больше чем другой и будет за него "цепляться"
как вариант можно что-то типа такого

Код

<html>
<HEAD>
<style type="text/css">
DIV.element-brief {FLOAT: left; WIDTH: 115px;background:red;}
DIV.element-brief DIV.element_image {HEIGHT: 100px;}
DIV.element-brief DIV.element_info {PADDING-RIGHT: 2em;OVERFLOW:auto;height:100px}
</style>
</head>
<BODY>
        <DIV class=element-brief >
            <DIV class=element_image><IMG height=100 alt="" width=100 border=0></DIV>
            <DIV class=element_info>Элемент 1</DIV>
        </DIV>

        <DIV class=element-brief>
            <DIV class=element_image><IMG height=100 alt="" width=100 border=0></DIV>
            <DIV class=element_info>Элемент 2 элемент 2 элемент 2.Элемент 2 элемент 2 элемент 2.Элемент 2 элемент 2 элемент 2.</DIV>
        </DIV>

        <DIV class=element-brief>
            <DIV class=element_image><IMG height=100 alt="" width=100 border=0></DIV>
            <DIV class=element_info>Элемент 3</DIV>
        </DIV>

        <DIV class=element-brief>
            <DIV class=element_image><IMG height=100 alt="" width=100 border=0></DIV>
            <DIV class=element_info>Элемент 4</DIV>
        </DIV>

        <DIV class=element-brief>
            <DIV class=element_image><IMG height=100 alt="" width=100 border=0></DIV>
            <DIV class=element_info>Элемент 5</DIV>
        </DIV>
</BODY>
</HTML>

с указанием высоты и прокруткой для элементов element_info
 


--------------------
на форуме с 8.12.2002 (http://forum.vingrad.ru/index.php?act=ST&f=10&t=4874&st=0#)
PM   Вверх
Гриша
Дата 21.9.2007, 23:33 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


НУС(незнаю|узнаю|создаю)
*


Профиль
Группа: Участник
Сообщений: 181
Регистрация: 12.6.2005
Где: Земля, Москва, Хр ущевка

Репутация: нет
Всего: 1
dstorm81, спасибо за ответ. Вариант с прокруткой подписи под изображением не подходит, не читабельный. Вот если бы можно было делать высоту блока автоматической, а не фиксированной. Всетаки задача получается не решаемой, с учетом требумеых особенностей.
--------------------
Если долго мучиться, что-нибудь получитЬся.
PM MAIL WWW   Вверх
SelenIT
Дата 22.9.2007, 01:02 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401
Насколько мне известно, максимум, чего удалось добиться прогрессивной общественности в случае нефиксированной высоты блоков - вот это. Правда, автор этого решения пишет, что сделано это "исключительно в целях извращения и тренировки мозга"...


--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
Гриша
Дата 22.9.2007, 17:47 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


НУС(незнаю|узнаю|создаю)
*


Профиль
Группа: Участник
Сообщений: 181
Регистрация: 12.6.2005
Где: Земля, Москва, Хр ущевка

Репутация: нет
Всего: 1
SelenIT, спасибо за ответ. Попробую разобраться с этим вариантом.

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

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




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


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

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