Дізнайтеся, як зробити обтікання текстом навколо зображення, що плаває, за допомогою CSS.
Щоб ваш текст обтікав зображення праворуч, подібно до того, як він зображений на фотографії, що представляє цю статтю, скористайтеся правилом CSS, таким як:
Правило float: ліворуч переміщує зображення до лівого поля. Правило відступу вправо не дозволяє тексту натикатися прямо на праву частину зображення. Якби до цього зображення було додано межу, між зображенням і межею було б додавання. Перегляньте розділ 2, щоб працювати із зображенням із рамкою.
Потім додайте поля ліворуч і праворуч від зображення, щоб центрувати його. Правильне значення для лівого та правого полів для центрування чого-небудь є автоматично.
Щоб створити товсту межу, схожу на рамку, за допомогою стилю межі пазу, можна використовувати таке правило:
Інші стилі бордюрів: суцільні, пунктирні, штрихові, подвійні, ребристі, врізні та вихідні. Ширина може бути виражена в пікселях, ems або у відсотках.
Межі можна застосовувати вибірково до верхньої, правої, нижньої та лівої частини зображення. Ви можете використати ці знання, щоб створити ефект, як тінь.
Використовуючи суцільну рамку в 2 відтінках сірого лише на правій і нижній межі, ви отримаєте ефект тіні.
img { float: left; стиль обрамлення: суцільний; ширина правої межі: 8 пікселів; border-right-color: #CCCCCC; бордюр-низ-стиль: суцільний; border-bottom-width: 8px; border-bottom-color: #999999; margin-right: 1em; margin-bottom: 1em; }
Порада
Якщо у вас є зображення в більш ніж одному розділі (div) сторінки, використовуйте селектори нащадків, щоб стилізувати їх окремо. Можливі селектори: #content img, #sidebar img, #feature img.
