Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Расположить изображения с подписями в одной строке


Автор: Гриша 19.9.2007, 16:24
Здравствуйте.

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

Вобщем это у меня получается, но есть проблема: 
Объясняю проблему по примеру, 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>

Автор: Гриша 21.9.2007, 02:35
Есди проблема нерешаемая, понимающие люди, напишите пожалуйста об этом, а то я кручу верчу с этим решением, незнаю получится или нет, может зря.

Автор: dstorm81 21.9.2007, 10:53
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
 

Автор: Гриша 21.9.2007, 23:33
dstorm81, спасибо за ответ. Вариант с прокруткой подписи под изображением не подходит, не читабельный. Вот если бы можно было делать высоту блока автоматической, а не фиксированной. Всетаки задача получается не решаемой, с учетом требумеых особенностей.

Автор: SelenIT 22.9.2007, 01:02
Насколько мне известно, максимум, чего удалось добиться прогрессивной общественности в случае нефиксированной высоты блоков - http://lynn.ru/xpoint/37015/. Правда, автор этого решения http://xpoint.ru/forums/internet/html_css/css/thread/37015.xhtml#338055, что сделано это "исключительно в целях извращения и тренировки мозга"...

Автор: Гриша 22.9.2007, 17:47
SelenIT, спасибо за ответ. Попробую разобраться с этим вариантом.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)