.sign {float: left; /* Выравнивание по правому краю */
border: 2px solid #333; /* Параметры рамки */
padding: 7px; /* Поля внутри блока */
margin: 10px 5px 5px 5px; /* Отступы вокруг */
background: #f0f0f0; /* Цвет фона */
text-align: center; /* Выравнивание по центру */
}
html. Как лучше расположить несколько изображений в один ряд.
Мне необходимо расположить несколько абсолютно одинаковых изображений разной тематики в один ряд+указать к ним названия.
Расположить удалось, а вот с названиями проблема. Подскажите, как лучше поступить?
Я мыслю так, что поменять не знаю?:confused:
<p>
<img src="lek9/1.png" width="150" height="200">
<img src="lek9/3.png"width="150" height="200">
<img src="lek9/12.png"width="150" height="200">
<img src="lek9/22.png"width="150" height="200">
</p>
Расположить удалось, а вот с названиями проблема. Подскажите, как лучше поступить?
Я мыслю так, что поменять не знаю?:confused:
<p>
<img src="lek9/1.png" width="150" height="200">
<img src="lek9/3.png"width="150" height="200">
<img src="lek9/12.png"width="150" height="200">
<img src="lek9/22.png"width="150" height="200">
</p>
Код:
<p>
<div style="float:left; margin:10px;"><img src="lek9/1.png" width="150" height="200"><br /> Подпись 1</div>
<div style="float:left; margin:10px;"><img src="lek9/3.png"width="150" height="200"><br /> Подпись 2</div>
<div style="float:left; margin:10px;"><img src="lek9/12.png"width="150" height="200"><br /> Подпись 3</div>
<div style="float:left; margin:10px;"><img src="lek9/22.png"width="150" height="200"><br /> Подпись 4</div>
</p>
<div style="float:left; margin:10px;"><img src="lek9/1.png" width="150" height="200"><br /> Подпись 1</div>
<div style="float:left; margin:10px;"><img src="lek9/3.png"width="150" height="200"><br /> Подпись 2</div>
<div style="float:left; margin:10px;"><img src="lek9/12.png"width="150" height="200"><br /> Подпись 3</div>
<div style="float:left; margin:10px;"><img src="lek9/22.png"width="150" height="200"><br /> Подпись 4</div>
</p>
Спасибо!
Хардкодинг -- это плохо. Лучше в тегах прописать класс, а свойства вынести в таблицу стилей.
Я долго рылась, остановилась на таком варианте:[HTML]
<div class="sign">
<p> <img src="lek9/mmm.png" width="150" height="200">
<h2> Рубенс</h2>
<h2> Клара Серена</h2> </p>
</div>
<div class="sign">
<p> <img src="lek9/mm.png" width="150" height="200">
<h2> Дюрер Альбрехт </h2>
<h2>Durer Albrecht </h2></p>
</div>[/HTML]
<div class="sign">
<p> <img src="lek9/mmm.png" width="150" height="200">
<h2> Рубенс</h2>
<h2> Клара Серена</h2> </p>
</div>
<div class="sign">
<p> <img src="lek9/mm.png" width="150" height="200">
<h2> Дюрер Альбрехт </h2>
<h2>Durer Albrecht </h2></p>
</div>[/HTML]
Код:
главное не забыть про title и alt (второе - опционально, но иногда полезно) в img.
Да и как альтернативный вариант можно было вместо дивов table'ом сверстать;)
Огромное спасибо за помощь. Вариант table'ом рассматривался, но и так все "красиво" вышло. Мне на сайте все очень нравится, много полезного нахожу....