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

HTML и CSS XSLT JavaScript Изображения Софт Etc

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

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

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

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

Второе издание «Ководства»

Офтальмологическая установка компании «Оптосистемы»

Флеш-накопитель «Фолдерикс»

Книга «Карта Птолемея» Герца Франка

Cайт «Анкора» 2.0

Сайт риелторской компании «Ригрупп»

Книга Вадима Панова «День дракона»

Фирменный стиль и буклет «Грейн Холдинга»

<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>

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

26 сентября 2008

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