3 типа размещения изображений на CSS?

Question

[Михаил Лялин]

На сайте используются 3и разных типа размещения графики:

• hspace="10" vspace="10" align="left"
  
• hspace="10" vspace="10" align="right"
  
• без позиционирования вообще.
  

Как наиболее компактно написать общий CSS и вызов конкретного типа для конкретного изображения на странице?

Answer 1

[Максим Тимофеев]

css

.image-margin {margin: 10px;}
.pull-right {float: right;}
.pull-left {float: left;}

html

<img src='путь/до/картинки' class="image-margin pull-right">
<img src='путь/до/картинки' class="image-margin pull-left">
<img src='путь/до/картинки' class="pull-left">
<img src='путь/до/картинки' class="pull-right">
<img src='путь/до/картинки' class="image-margin">

Comments

[Михаил Лялин]

Можно ли сократить тип класса до .m .r .l и сочетать как class "m r"?

[Максим Тимофеев]

Михаил Лялин: конечно, какая разница как назвать

[Максим Тимофеев]

Михаил Лялин: А самое главное, что это можно не только к картинкам применять, но и к другим блокам. Действую везде этой логикой получите мини css framework. Очень рекомендую к ознакомлению и использованию: getbootstrap.com/css

[Михаил Лялин]

Максим Тимофеев: Последний вопрос - как реализовать при этом обтекание картинки текстом? Потому что сейчас при переходе на классы картинка идёт над текстом.

[Максим Тимофеев]

Михаил Лялин: float: left; - это и есть обтекание.

Answer 2

[Игорь Воронов]

Все эти атрибуты считаются устаревшими.
float`ы вас спасут.

>> Как наиболее компактно написать общий CSS
Селектор по классу.

>> вызов конкретного типа для конкретного изображения на странице
В каком смысле вызов? Если у вас подключен необходимый css-файл и в нем есть свойства для необходимых селекторов, они применятся.

Comments

[Михаил Лялин]

А есть ли online сервисы для проверки CSS на соответствие современным требованиям?

[Игорь Воронов]

Михаил Лялин: w3schools.com? на developer.mozilla.org хорошо описано, что к чему.
Если русскоязычный сервис, то это, пожалуй webref.ru (htmlboor.ru).

[Михаил Лялин]

Игорь Воронов: В решении Максима как реализовать при этом обтекание картинки текстом? Потому что сейчас при переходе на классы картинка идёт над текстом.

[Игорь Воронов]

Михаил Лялин: свойство float отвечает за обтекание.
Это все невероятно просто гуглится.
+ не забывайте про размеры изображений, посмотрите, что такое за свойство clear и т.д.