Узнайте, как заставить текст обтекать плавающее изображение с помощью CSS.
Чтобы текст обтекал изображение справа, как на фотографии, представляющей эту статью, используйте такое правило CSS:
Правило float: left заставляет изображение перемещаться к левому краю. Правило padding-right предотвращает столкновение текста с правой стороной изображения. Если бы к этому изображению была добавлена граница, между изображением и рамкой появилось бы заполнение. См. Раздел 2 для работы с изображением с рамкой.
Затем добавьте поля слева и справа от изображения, чтобы центрировать его. Правильное значение для левого и правого полей для центрирования чего-либо - auto.
Чтобы создать толстую рамку с использованием стиля границы канавки, можно использовать такое правило:
Другие стили границы: сплошная, пунктирная, пунктирная, двойная, гребенчатая, вставка и начальная. Ширина может быть выражена в пикселях, em или процентах.
Границы можно применять выборочно к верхней, правой, нижней и левой сторонам изображения. Вы можете использовать эти знания для создания эффекта, подобного падающей тени.
Используя сплошную границу двух оттенков серого только на правой и нижней границе, вы получите эффект тени.
img {float: left; граница-правый-стиль: сплошной; ширина правой границы: 8 пикселей; цвет границы справа: #CCCCCC; стиль нижнего края: сплошной; ширина нижней границы: 8 пикселей; цвет нижней границы: # 999999; маржа справа: 1em; нижнее поле: 1em; }
Кончик
Если у вас есть изображения в нескольких разделах (div) страницы, используйте селекторы потомков, чтобы стилизовать их индивидуально. Возможные селекторы: #content img, #sidebar img, #feature img.
