• Техногрет
  • Блоки картинок с подписями

    HTML и CSSXSLTJavaScriptИзображенияСофтEtc
    Владимир Токмаков

    26 сентября 2008


    Задача.

    Сверстать float-блоки, высота и ширина которых привязаны к размеру картинки и текстового описания.

    Цель — как можно равномернее распределить контент по доступному пространству окна браузера (с учетом всего разнообразия мониторов и разрешений).

    В этом примере рассматривается создание float-блоков, высота которых слагается из высоты изображения в пикселях и высоты текста в em, а ширина зафиксирована одновременно в пикселях и em-ах.

    Как это выглядит в браузере

    Ководство. Второе издание
    Второе издание «Ководства»
    Оптосистемы
    Офтальмологическая установка компании «Оптосистемы»
    Фолдерикс
    Флеш-накопитель «Фолдерикс»
    Карта Птолемея
    Книга «Карта Птолемея» Герца Франка
    Ригрупп
    Сайт риелторской компании «Ригрупп»
    День дракона
    Книга Вадима Панова «День дракона»
    Грейн Холдинг
    Фирменный стиль и буклет «Грейн Холдинга»
    01 
    02 
    03 
    04 
    05 
    06 
    07 
    08 
    09 
    10 
    11 
    12 
    13 
    14 
    15 
    16 
    17 
    18 
    19 
    20 
    21 
    22 
    23 
    24 
    25 
    26 
    27 
    28 
    29 
    30 
    31 
    32 
    33 
    34 
    35 
    36 
    37 
    38 
    39 
    40 
    41 
    42 
    43 
    44 
    45 
    46 
    47 
    48 
    49 
    50 
    51 
    52 
    53 
    54 
    55 
    56 
    57 
    58 
    59 
    60 
    61 
    62 
    63 
    64 
    65 
    66 
    67 
    68 
    69 
    70 
    71 
    72 
    73 
    74 
    75 
    76 
    77 
    78 
    79 
    80 
    81 
    82 
    83 
    84 
    85 
    86 
    87 
    88 
    89 
    90 
    91 
    92 
    93 
    94 
    95 
    96 
    97 
    98 
    99 
    100 
    101 
    102 
    103 
    104 
    105 
    106 
    107 
    108 
    109 
    110 
    111 
    112 
    113 
    <style type="text/css">
    .floats
    {
    /* Компенсируем отступы между float-блоками, чтобы они занимали все доступное пространство */
    margin: -3em 0 0 -2em;
    
    /* Эти правила для IE */
    position: relative;
    display: inline-block;
    clear: both;
    }
    .floats:after
    {
    content: '';
    display: block;
    clear: both;
    }
    .floats .left
    {
    position: relative;
    float: left;
    
    /* Убираем удвоение отступов в IE */
    display: inline;
    
    /* Прячем все, что вдруг вылезло за наши ограничения */
    overflow: hidden;
    
    /* Отсупы между float-блоками */
    margin: 3em 0 0 2em;
    
    /* Задаем минимальную ширину по картинке и тексту */
    width: 14em;
    min-width: 200px;
    }
    .floats .left .r
    {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    }
    .floats .left .min
    {
    /* Задаем минимальную высоту по картинке */
    margin: 0 0 200px 0;
    
    /* Задаем минимальную высоту по тексту */
    height: 4em;
    
    /* Дублируем значение минимальной ширины по картинке для IE */
    width: 200px;
    }
    </style>
    <div class="floats">
        <div class="left">
            <div class="r">
                <a href="/everything/izdal/kovodstvo2/"><img src="/everything/izdal/kovodstvo2/izdal-kovodstvo2-anon.jpg" alt="Ководство. Второе издание" /></a><br />
                Второе издание &laquo;<a href="/everything/izdal/kovodstvo2/">Ководства</a>&raquo;
            </div>
            <div class="min"></div>
        </div>
        <div class="left">
            <div class="r">
                <a href="/everything/optosystems/"><img src="/everything/optosystems/optosystems-anon.jpg" alt="Оптосистемы" /></a><br />
                <a href="/everything/optosystems/">Офтальмологическая установка</a> компании &laquo;Оптосистемы&raquo;
            </div>
            <div class="min"></div>
        </div>
        <div class="left">
            <div class="r">
                <a href="/everything/folderix/"><img src="/everything/folderix/folderix-anon.jpg" alt="Фолдерикс" /></a><br />
                Флеш-накопитель &laquo;<a href="/everything/folderix/">Фолдерикс</a>&raquo;
            </div>
            <div class="min"></div>
        </div>
        <div class="left">
            <div class="r">
                <a href="/everything/izdal/karta-ptolemeya/"><img src="/everything/izdal/karta-ptolemeya/izdal-karta-ptolemeya-anon.jpg" alt="Карта Птолемея" /></a><br />
                Книга &laquo;<a href="/everything/izdal/karta-ptolemeya/">Карта Птолемея</a>&raquo; Герца Франка
            </div>
            <div class="min"></div>
        </div>
        <div class="left">
            <div class="r">
                <a href="/everything/ancor/site2/"><img src="/everything/ancor/site2/ancor-anon.jpg" alt="Анкор 2.0" /></a><br />
                <a href="/everything/ancor/site2/">Cайт &laquo;Анкора&raquo;&nbsp;2.0</a>
            </div>
            <div class="min"></div>
        </div>
        <div class="left">
            <div class="r">
                <a href="/everything/rigroup/"><img src="/everything/rigroup/rigroup-anon.jpg" alt="Ригрупп" /></a><br />
                Сайт риелторской компании &laquo;<a href="/everything/rigroup/">Ригрупп</a>&raquo;
            </div>
            <div class="min"></div>
        </div>
        <div class="left">
            <div class="r">
                <a href="/everything/eksmo/panov-dragon-day/"><img src="/everything/eksmo/panov-dragon-day/panov-dragon-day-anon.jpg" alt="День дракона" /></a><br />
                Книга Вадима Панова &laquo;<a href="/everything/eksmo/panov-dragon-day/">День дракона</a>&raquo;
            </div>
            <div class="min"></div>
        </div>
        <div class="left">
            <div class="r">
                <a href="/everything/grain-holding/identity/"><img src="/everything/grain-holding/identity/grain-anon.jpg" alt="Грейн Холдинг" /></a><br />
                Фирменный стиль и&nbsp;буклет &laquo;<a href="/everything/grain-holding/identity/">Грейн&nbsp;Холдинга</a>&raquo;
            </div>
            <div class="min"></div>
        </div>
    </div>