каждого продаваемого им дома. Вместо того чтобы заставлять посетителя загру — жать каждое полноэкранное изображение на экран, можно вывести миниатюры с размерами, в десять раз меньшими размеров реальных фотографий. Таким обра —

Глава 4. Каскадные списки стилей 225





зом, вам удастся вывести десять фотографий за то же время, что выводится одна

полноэкранная фотография. Если посетители) понравиться описание одного их домов, он может загрузить его полноэкранную фотографию.

Если для выравнивания миниатюр изображений и надписей к ним использу —

ется HTML-таблица, браузер не сможет варьировать количество йакетов, выводи — мых в одной строке, основываясь исключительно на размере окна браузера. Если, например, вы создали таблицу с 10 столбцами, браузер должен будет все —

гда выводить в одной строке 10 миниатюр, даже если одновременно на экране в горизонтальном направлении будет помещаться, скажем, не более 5 миниатюр.

Как результат, в этом случае посетителю для просмотра всех миниатюр придется

пролистывать содержимое Web-страницы в горизонтальном направлении. С по —

мощью каскадных списков стилей вы можете варьировать количество миниатюр, выводимых в окне Web-браузера, в зависимости от его ширины.| Таким образом,

требования к нашей галерее миниатюр достаточно просты. В IjTML-документе

напишите код, который будет вставлять изображение, за ним Поместите деск —

риптор и текстовое описание, центрируемое под изображением.



Для указания Web-браузеру автоматически определять количество выводимых в

строке изображений, поместите каждое изображение (и его заголовок) в отдель —

ный контейнер И выровняйте каждый такой контейнер 1ю левому краю.

Кроме того, установите стиль элемента абзаца таким образом, чтобы-браузер

центрировал текст абзаца между левым и правым краем контейнера, как показа — но в следующем коде;

div. fLeft {float:left; padding-left:5рх; padding-right:$px}

div. fLeft p {text-align:center}

Первое правило создает класс fLeft, который можно применить к контейне —

ру для выравнивания контейнера (и его содержимого) по л|евому краю эле —

мента, расположенного на Web-странице после контейнера. Если в окне браузера нет места для вывода контейнера на экран в текущей строке, браузер

перейдет в Строку под текущим контейнером и выровшяет следующий

контейнер по левому краю Web-страницы. Второе правило указывает браузеру цент — рировать текст абзаца между левым и правым краями контейнера, формати —

рование и позиционирование которого осуществляется с помощью класса fLeft.

Таким образом, код для вывода на экран переменного количества макетов и

заголовков к ним в одной строке будет выглядеть следующим образом:



226 Глава 4. Каскадные списки стилей





Для правильной работы код этого примера требует, чтобы каждый заголовок

макета содержал одно и то же количество строк, а длина каждой строки не пре- вышала ширины макета, под которым заголовок находится. Если одна или не — сколько строк длиннее миниатюры, Web-браузер, как и раньше, будет центриро — вать текст заголовка относительно краев контейнера. Тем не менее, миниатюра окажется слева, а не по центру над текстом. Для вставки полей между миниатю — рой и левым и правим краями контейнера, как показано на рис. 4.23, воспользуйтесь объявлениями padding-left и padding-right в определении