Блоки картинок с подписями

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>