Автор: Крис Койер
Перевод: Всеволод Козлов

Данную проблему принято решать несколькими путями. Самый распространенный, это задать простые стили для изображений, выровненных по левому краю, правому и по центру, например:

.floatright {
float: right;
margin: 5px;
}

Однако, этот способ лишает нас возможности оформить изображения более изящно.

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

Вот, как выглядит мое решение проблемы в итоге:

Css оформлениe изображений

HTML код решения проблемы

<div class="rightside_image">
<img src="egg.jpg" alt="egg" />
<p>Stop-motion image of an<br />egg getting sliced in half.</p>
</div>

CSS код решения проблемы

div.rightside_image {
float: right;
padding: 10px;
margin: 10px;
border: 2px solid #cccccc;
text-align: center;
font-size: 0.8em;
font-style: italic;
}

Теперь Вы можете преобразовать стили под наиболее подходящие Вам.

Оригинал статьи: Give Your Images Space and Captions For Better Layout


















Смотрите также:

Понравилась статья? Поделитесь ей в социальных сетях: