Как сделать элемент обтекаемым

Добавил пользователь Владимир З.
Обновлено: 18.09.2024

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

Ладно, будем считать, что отдохнули перед очередной порцией информации.. и хотя в этой главе речь пойдёт о поплавках диалоги будут вовсе не о рыбалке..

Итак, свойство float - что поделаешь, этому свойству, при переводе с английского не придумали более точного определения, нежели чем "поплавок". А элемент с таким свойством называют "всплывающим"

Теперь побольше конкретики и примеров..

Обтекание элемента

Свойство float определяет, по какой стороне будет выравниваться - всплывать элемент, при этом остальные элементы будут обтекать его с других сторон.

Выравнивание элемента происходит по краям родительского элемента или же по краям окна браузера.

Значения свойства float :

left - Выравнивает элемент по левому краю, остальные элементы обтекают его справа.
right - Выравнивает элемент по правому краю, остальные элементы обтекают его слева.
none - Выравнивание элемента не задается. (по умолчанию)

Небольшой пример: заставим текст обтекать фотографию по правому краю при этом сам блок с фотографией "всплывёт" с левой стороны.

Текст в этом блоке обтекает рисунок помещённый в контейнер div с правой стороны, так как сам блок с рисунком, с помощью свойства float с значением left, "всплывает" слева.

В этой статье мы разберем варианты, как сделать обтекание картинки текстом. Всего есть несколько способов. Рассмотрим каждый из них. Для начала советую ознакомиться со статье html тег , чтобы иметь базовые знания по изображениям на html страницах.

1. Обтекание с помощью стилей тега

Картинку можно выровнять только оперируя со стилями CSS тега . Как известно синтаксис тега допускает в атрибутах задавать выравнивание изображения:

где VALUE может принимать значения

left — выравнивание по левому краю
right — выравнивание по правому краю
bottom — выравнивание по первой строке текста (это значение стоит по умолчанию)
top — выравнивание по верхней строке текста
middle — выравнивание по базовой строке текста

Вот как это будет выглядеть на странице:

Картинка как бы слиплась с текстом, поэтому сделаем отступы. Причем есть два варианта как это можно сделать.

Вариант 1.1. Через свойство CSS — hspace и vspace
Для этого в атрибутах тега добавляем два значения:

Вот как это будет выглядеть на странице:

Атрибут hspace задает горизонтальный отступ в пикселях, vspace - соответственно вертикальный

Вариант 1.2. Через свойство CSS — padding и margin
Для этого в атрибутах тега добавляем два значения:

Вот как это будет выглядеть на странице:

Выглядит лучше за счет того, что мы не стали делать отступ слева. Вместо margin можно использовать padding , эффект будет аналогичный.

Использование свойства float вместо align

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

Например, если написать в предыдущем примере вывод картинки следующим образом:

То это преобразуется в следующее:

Благодаря float можно задавать единый class для картинок, что очень даже удобно.

Сегодня изображения используются в интернете практически повсеместно. Невозможно себе представить веб страницу на которой нет изображения. Картинки привлекают внимание, улучшают внешний вид и восприятие текста. Поэтому в данном уроке мы научимся позиционировать изображения по отношению к тексту и рассмотрим как сделать обтекание картинки текстом в HTML, а так же при помощи CSS свойств и значений.

Обтекание картинки текстом при помощи HTML

Наиболее простой, способ позиционирования картинки на странице это воспользоваться средствами HTML. Но у данного способа, по сравнению с возможностями CSS есть недостаток, в нем нет возможности установить отступ между картинкой и текстом, а лишь можно сделать так, чтобы текст обтекал изображение.

У тега img имеется атрибут align, который и определяет по какому краю будет расположена картинка и с какого края ее будет обтекать текст (например align="left" по левому краю). Атрибут align имеет следующие значения:

left - изображение будет расположено по левому краю, а текст будет обтекать его справа;
right - изображение расположится справа, а текст будет обтекать его слева;
bottom - отвечает за вертикальное выравнивание, при этом картинка будет находится слева, а нижняя часть изображения на против первой строки текста, это значение задано по умолчанию;
top - тоже, что и предыдущее значение, только строчка текста будет располагаться по верхней границе изображения;
middle - при данном значении происходит выравнивание середины изображения по базовой линии строки.

Теперь рассмотрим каждый элемент на практике.

1. Как я уже упоминал, по умолчанию картинке заданно значение bootom, т. е. не зависимо от того, пропишем мы его или нет наша картинка по отношению к тексту будет позиционирована так:

2. Чтобы выровнять изображение по левому краю, а текст его обтекал справа нужно прописать следующее:

3. Для выравнивания изображения по правому краю нужно соответственно прописать:

4. Теперь рассмотрим вертикальное выравнивание. Если применить значение top, то первая строчка текста будет расположена на против верхней границы изображения.

5. Выравнивание текста по центру картинки. Данный прием очень хорошо применять если вам нужно небольшую картинку расположить по центру строки.

Обтекание картинки текстом при помощи свойств CSS

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

Разберем простой пример, как сделать обтекание картинки текстом, когда картинка расположена по левому краю, а текст обтекает ее справа. При этом между текстом и картинкой зададим определенные отступы.

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

Теперь классу leftfoto нужно присвоить определенные CSS стили.

Данный код располагают между тегами . , заключив в теги или помещают во внешний файл стилей CSS.

Разберем те элементы, которые мы здесь задали:

float:left; - мы позиционировали картинку по левому краю и заставили обтекать текст вокруг картинки справа, это по сути то же самое, что и атрибут align="left".
margin: 4px 10px 2px 0px; - мы задали внешние отступы, 4px - от верха, 10px - справа, 2px снизу и 0px слева от изображения.

Добавив к данным стилям рамку и внутренний отступ можно придать изображению некий эффект фотографии с белыми краями:

Как заставить блоки content обтекать блок left , а не пролазить под ним?

А зачем? Что именно вы пытаетесь сделать? Имейте в виду, что текст в блоке может вести себя по другому.

1 ответ 1

Убрать ширину, добавить overflow: hidden и перетащить margin для края плавающему:

Как сделать элемент обтекаемым

Обтекание элемента

1. Обтекание с помощью стилей тега

Использование свойства float вместо align

Обтекание картинки текстом при помощи HTML

Обтекание картинки текстом при помощи свойств CSS

1 ответ 1

Всё ещё ищете ответ? Посмотрите другие вопросы с метками css вёрстка div адаптивная-верстка или задайте свой вопрос.

Похожие