Css обтекание картинки


Обтекание картинки текстом - HTML и css

Очень важно красиво разместить все элементы на странице, чтобы всё смотрелось органично и стояло на своих местах. Чтобы сделать всё правильно нельзя обойтись без CSS. Чтобы притянуть картинку к левому краю дописываем атрибут align=left после .jpg» и закрываем скобки />, чтобы притянуть картинку вправо аналогично вставляем align=right. Конечно, текст обтекает картинку, но отступов он сам не сделает, поэтому в любом случае необходима работа с CSS. Существует много способов решения данной проблемы, рассмотрим самые правильные и несложные варианты.

Первый вариант

Заключите нужное изображение в тег div, затем откройте файл CSS и придайте ему вот это значение: float: left (right = лево-право на ваше усмотрение) и проставьте нужные отступы.

Второй вариант


Присвойте нужному изображению класс. В CSS добавьте поля float: left (right). Margin: 15px 15px 15px 0 — длина отступа: сверху, справа, снизу (отступ к которому прижимается текст к картинке, по умолчанию равен нулю). Случается, что нужно оформить несколько изображений на одной странице. К примеру, изображения находятся в посте. В коде страницы он отображается приблизительно вот так:

<div class=content></div>

В файле CSS, в этом примере необходимо дописать:

  .content img {  float: left;  margin: 10px 10px 10px 0;  }  

После этого, все картинки в элементе «content» будут отображаться с заданными вами отступами. А если понадобиться одну картинку выставить по-другому — задайте id (id=your_img), а в CSS допишите:

  #your_img {  float: right;  margin: 5px 0 5px 5px;  }  

Как наложить на картинку текст

Иногда нужно написать текст прямо на изображении, что-то ввиде анонса или назвния. Как и в прошлом случае способов несколько:

Первый вариант

Сделайте блок, вставьте в него текст, саму картинку сделайте фоном данного блока.

<div class="your_block">Ваш-текст</div>
  .my_block {  (фон-картинка): url (your_image.jpg) - адрес изображения top left no-repeat;  (ширина): 300px;  (высота): 200px;  (заполнение): 250px 1 1 1;  }  

Этот вариант подойдёт и для логотипа, и для шапки.


Второй вариант

Сразу создать два блока, первый с картинкой, второй с текстом (сделайте полупрозрачный фон). И наложить один на другой задав необходимые параметры.

  <div class="img">  <img src="любая-ваша-картинка.jpg" width="300" height="200" />  <div class="text">Любой-текст</div>  </div>  
  .img {  (ширина изображения): 300px;  (высота изображения): 200px;  (заполнение): относительное;  }  
  .text {  background-color (цвет фона): #AAA;  (ширина): 300px;  (высота): 30px;  (положение): абсолютное;  (влево): 0px;  (вправо): 500px;  }  

В этом примере первый блок размещен внутри второго при помощи свойства под названием position. У блока с текстом задан нужный фон и сам внедрён в нижнюю часть картинки.

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

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

searchtimes.ru


Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 1.0+ 4.0+ 1.0+ 1.0+ 1.0+ 1.0+

Задача

Добавить изображение на страницу так, чтобы оно обтекалось рядом лежащим текстом.

Решение

Обтекание картинки текстом обычно используется для компактного размещения материала и связывания между собой иллюстраций и текста. Само обтекание создаётся с помощью стилевого свойства float, добавляемого к селектору IMG. Значение left выравнивает изображение по левому краю, right — по правому. Обтекание при этом происходит по другим, свободным сторонам.

Пример 1. Обтекание картинок

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html> <html>  <head>  <meta charset="utf-8">  <title>Обтекание</title>  <style>  .leftimg {  float:left; /* Выравнивание п.  

подверглась нападению неизвестного противника в камуфляжной форме Алиенов. В результате эффективной обороны и стремительной контратаки многочисленная группа боевиков была смята и отброшена. Среди личного состава потерь нет. Бойцы разведгруппы проявили недюжие навыки владения оружием. Особо отличился в бою взводный Кудряшев&nbsp;М.А., грамотно использовавший человеческие ресурсы своего взвода. В результате операции были захвачены элементы внеземной культуры, которые переданы аналитической группе.</p> <h2>Пресс-релиз аналитической группы</h2> <p><img src="images/2.jpg" alt="Учёные, находящиеся в состоянии аффекта" class="rightimg"> В наших секретных лабораториях в рамках проекта &laquo;Пандора&raquo; разрабатывалось психотропное оружие. В результате неудачного эксперимента большинство ученых, работавших над прибором, подверглись воздействию психотропного излучения, и они, находясь в состоянии аффекта, растащили прототип по деталям. Возможно, наши ученые до сих пор находятся в состоянии аффекта.</p> </body> </html>

Результат данного примера показан на рис. 1.

Текст с иллюстрациями

Рис. 1. Текст с иллюстрациями

Использование свойства float заставляет текст плотно прилегать к изображению. Поэтому в примере введёно универсальное свойство margin, которое добавляет отступы между картинкой и текстом. Это свойство одновременно задаёт отступ сверху, справа, снизу и слева от фотографий.

htmlbook.ru

Хочу предложить вам интересный эффект на CSS – обтекание текста вокруг картинки, а точнее по форме изображения или фигуры. Вот, например, если картинка имеет форму круга, то по стандарту это будет выгладить вот так:


Обтекание текста вокруг изображения с помощью CSS

А вот с применением CSS обтекания текста по фигуре:

Обтекание текста вокруг изображения с помощью CSS

На сайте этот эффект выглядит вот так:

Обтекание текста вокруг изображения с помощью CSS

Итак, приступим теперь к самому коду.
С помощью  правила «shape-outside» мы можем создать геометрическую фигуру, по форме которой и будет обтекать текст.
Фигуры могут быть созданы с помощью одной из следующих функций:

circle()  — круг;

ellipse() — эллипс, овал;

polygon() – многоугольник.

Рассмотрим каждую фигуру на примере.

Круг — circle() 

Если вы хотите сделать обтекание текста по фигуре круга, используйте функцию circle():

shape-outside: circle(50%);

50% — это радиус круга. Вы можете его менять, если нужно.

Полный пример:


gt; I am your servant, may I light your cigarette?<br> Those lips smooth, yeah I can feel what you're saying, praying<br> They say the beast inside of me's gonna get ya, get ya, get...<br> I beg to serve, your wish is my law<br> Now close those eyes and let me love you to death<br> Shall I prove I mean what I'm saying, begging<br> I say the beast inside of me's gonna get ya, get ya, get...<br> Let me love you too Let me love you to death Hey am I good enough<br> For you?<br> ... </p>

Результат:

Обтекание текста вокруг изображения с помощью CSS

Если хотите, чтобы картинка приняла ту же форму, тогда используйте правило «clip-path» с идентичными параметрами:

  shape-outside: circle(50%);  clip-path: circle(50%);  

Пример:


  <style>  .circle {  float: left;  shape-outside: circle(50%);  clip-path: circle(50%); /* Если хотите, чтобы картинка приняла ту же форму */  }  </style>    <img src="bloggood-ru.png" class="circle">  <p>  In her place one hundred candles burning<br>  A salty sweat drips from her breast<br>  Her hips move and I can feel what they're saying, swaying<br>  They say the beast inside of me's gonna get ya, get ya, get...<br>  Black lipstick stains her glass of red wine<br>  I am your servant, may I light your cigarette?<br>  Those lips smooth, yeah I can feel what you're saying, praying<br>  They say the beast inside of me's gonna get ya, get ya, get...<br>  I beg to serve, your wish is my law<br>  Now close those eyes and let me love you to death<br>  Shall I prove I mean what I'm saying, begging<br>  I say the beast inside of me's gonna get ya, get ya, get...<br>    Let me love you too  Let me love you to death  Hey am I good enough<br>  For you?<br>  ...  </p>  

Результат:

Обтекание текста вокруг изображения с помощью CSS

Эллипс, овал  — ellipse()

Чтобы создать форму эллипса или овала, используйте функцию ellipse():


Значения для радиуса задаются по оси X и оси Y.

shape-outside: ellipse(X Y);

Пример:

  <style>  .ellipse {  float: left;  shape-outside: ellipse(30% 50%);  clip-path: ellipse(30% 50%); /* Если хотите, чтобы картинка приняла ту же форму */  }  </style>    <img src="bloggood-ru.png" class="ellipse">  <p>  In her place one hundred candles burning<br>  A salty sweat drips from her breast<br>  Her hips move and I can feel what they're saying, swaying<br>  They say the beast inside of me's gonna get ya, get ya, get...<br>  Black lipstick stains her glass of red wine<br>  I am your servant, may I light your cigarette?<br>  Those lips smooth, yeah I can feel what you're saying, praying<br>  They say the beast inside of me's gonna get ya, get ya, get...<br>  I beg to serve, your wish is my law<br>  Now close those eyes and let me love you to death<br>  Shall I prove I mean what I'm saying, begging<br>  I say the beast inside of me's gonna get ya, get ya, get...<br>    Let me love you too  Let me love you to death  Hey am I good enough<br>  For you?<br>  ...  </p>  

Результат:

Обтекание текста вокруг изображения с помощью CSS


Многоугольник  — polygon()

Эта функция помогает создать любую форму с тремя или более вершинами:

shape-outside: polygon(Х Y, Х1 Y1, Х2 Y2,… Х9 Y9);

Точки фигуры также строятся по осям Х Y
Для примера я построю треугольник.

Пример:

  <style>  .polygon {  float: left;  shape-outside: polygon(0% 80%, 100% 80%, 50% 0%);  clip-path: polygon(0% 80%, 100% 80%, 50% 0%); /* Если хотите, чтобы картинка приняла ту же форму */  }  </style>    <img src="bloggood-ru.png" class="polygon">  <p>  In her place one hundred candles burning<br>  A salty sweat drips from her breast<br>  Her hips move and I can feel what they're saying, swaying<br>  They say the beast inside of me's gonna get ya, get ya, get...<br>  Black lipstick stains her glass of red wine<br>  I am your servant, may I light your cigarette?<br>  Those lips smooth, yeah I can feel what you're saying, praying<br>  They say the beast inside of me's gonna get ya, get ya, get...<br>  I beg to serve, your wish is my law<br>  Now close those eyes and let me love you to death<br>  Shall I prove I mean what I'm saying, begging<br>  I say the beast inside of me's gonna get ya, get ya, get...<br>    Let me love you too  Let me love you to death  Hey am I good enough<br>  For you?<br>  ...  </p>  

Результат:

Обтекание текста вокруг изображения с помощью CSS

bloggood.ru

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

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

Рассмотрим все по порядку. Для вставки картинки в HTML страницу используется тег img, подробнее смотрите урок, как вставлять картинки в HTML:  http://webmastermix.ru/lessons-html/14-how-inser-a-picture-in-html.html. Поэтому, чтобы вставить картинку в текст HTML страницы, достаточно в коде прописать следующее:

— где foto.jpg — это относительный путь к картинке. Можно задать и абсолютный путь, тогда нужно прописать URL вида: http://webmastermix.ru/foto.jpg

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

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

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

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

Положение картинки по умолчанию

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

Пример:

Картинка слева

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

Пример:

Картинка справа

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

Пример:

Вертикальное положение картинки вверху

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

Пример:

Позиционирование картинки по центру

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

Как вы могли заметить на вышеприведенных примерах наша картинка и текст не совсем красиво располагаются по отношению друг к другу. Расположить их красиво на помогут CSS стили, которые можно добавить к картинке задав ей определенный класс и применив нужные свойства. Если вы не знаете, что такое CSS смотрите урок Основы CSS и важные понятия: http://webmastermix.ru/lessons-css/17-bases-css.html.

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

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

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

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

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

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

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

Пример:

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

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

Здесь мы добавили следующие элементы:

  • border:1px solid #CCC; — задали сплошную линию размером 1 пиксель и светло серым цветом;
  • padding:6px; — задали внутренний отступ между изображением и рамкой, равный 6 пикселям.

Пример:

Оформление картинки

Материал подготовлен проектом: WebMasterMix.ru

webmastermix.ru

Общее решение задачи

CSS? Я знаю несколько способов, с помощью которых можно решить поставленную задачу.

Так, например, можно картинку заключить в тег DIV, которому через CSS задать свойство float:left или float:right, с проставлением необходимых отступов.

Но этот способ я бы не назвал самым корректным — зачем включать в документ лишний тег, если вопрос можно решить исключительно в рамках тега IMG?

Делается это с помощью присвоения все тех же самых свойств — float, отвечающего за выравнивание, и margin, отвечающего за отступы.

Для начала присвоим нашему изображению класс:

  <img src="моя_картинка.jpg" width="100" height="100" class="img_class" />  

Теперь пропишем соответствующие свойства в CSS — предположим, что у нас картинка будет стоять слева:

  .img_class {  float: left;  margin: 10px 10px 10px 0;  }  

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

Массовое применение для всех изображений

Если требуется, чтобы все изображения в документе выравнивались по левому краю, тогда этот вопрос можно решить сразу на уровне того блока (элемента) страницы, в котором они находятся — чтобы не прописывать каждый раз class для изображения. Даже небольшая экономия трафика того стоит.

Предположим, что картинки находятся в посте, который на странице вашего сайта показывается в <div class=»content»></div>.

В таком случае в CSS файле вашего сайта будет достаточно прописать следующий код:

  .content img {  float: left;  margin: 10px 10px 10px 0;  }  

Теперь все изображения, находящиеся в блоке «content», будут выравниваться слева и иметь вышеуказанные отступы. Если для какого-то отдельного изображения вы захотите сделать исключение — например, расположить его справа, то для него будет нужно задать id (например, id=»my_img») и в css файле прописать такие параметры (должны начинаться со знака решетки — #):

  #my_img {  float: right;  margin: 10px 0 10px 10px;  }  

Накладываем текст на изображение

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

Опять-таки, сделать это можно множеством способов. Приведу два наиболее популярных.

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

  <div class="my_block">Текст, который будет наложен на картинку</div>  
  .my_block {  background: url (my_img.jpg) top left no-repeat;   width: 500px;  height: 300px;  padding: 400px 0 0 0;   }  

В этом блоке строка с текстом разместится в нижней части блока — с верхним отступом в 400 пикселей.

Данный метод особенно хорошо подходит для элементов дизайна (шапка, логотип сайта), в которых уже заранее известен и размер изображения, и текст, который будет написан.

Другой метод — это создать два блока (один — с картинкой, другой — с текстом), и поместить один «сверху» другого в соответствии с заданными параметрами. Большой плюс этого метода состоит в том, что у блока с текстом можно задать фон (в том числе и полупрозрачность):

  <div class="img">  <img src="моя_картинка.jpg" width="500" height="300" />  <div class="text">Текст, который будет наложен на картинку</div>  </div>  
  .img {   width:500px;   height: 300px;  position: relative;  }  .text {  background-color: #FFF;   width: 500px;   height: 50px;   position: absolute;   left: 0px;   top: 450px;  }  

В приведенном примере мы разместили один блок внутри другого с помощью свойства position — блок с текстом будет иметь белый фон и располагаться в нижней части изображения.

Как видите, ничего сложного в обтекании картинок и наложении на них текста нет, главное — экспериментировать и подбирать наиболее удачный вариант!

www.runcms.org

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

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

  • bottom – значение которое задается по умолчанию. Первая стока находится у нижнего края картинки. Картинка располагается с лева
  • top – в этом случае первая стока находится у верхнего края картинки. Картинка располагается с лева
  • right –картинка выравнивается по правому краю, а контент обтекает ее по левому
  • left — изображение выравнивается по левому краю, а контент обтекает ее с правой стороны
  • middle – в данном случае происходит выравнивание серединый изображения по базовой линии строки

Наиболее часто используются атрибуты right и left, для правого и левого обтекания. Данные варианты наиболее привычны для восприятия, и придают тексту с изображением наиболее компактный вид.

Вот пример использования атрибута align:

Обтекание картинки текстом CSS

Так же можно задать обтекание картинки текстом СSS-свойством. Данный способ очень удобно использовать в случаях, когда вам нужно задать обтекания для группы изображений на сайте в одном стиле.

В этом случае для каждого изображения мы должны задать уникальный класс, а далее, в файле стилей, или между тегами <style>…</style> в самой странице, прописать этому классу свойство float с соответствующим способом обтекания. Для того, что бы добиться обтекания по правому или левому краю изображения, мы можем использовать значения left и right, так же, как и с атрибутом align.

HTML-код изображения:

CSS:

На мой взгляд, такой способ задания обтекания картинки текстом в CSS более удобен. Так как вы, при помощи CSS-свойств, можете более гибко настраивать параметры отображения картинки и изменять их. В примере я добавила дополнительно отступ с правой и левой стороны свойством margin, а так же добавила для изображения рамку. Картинка стала более выразительной и контент теперь не прилипает к ней.

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

До встречи в следующих статьях!

С уважением Юлия Гусарь

impuls-web.ru

Задача

Сверстать блок, состоящий из картинки и текста, причем текст не должен обтекать картинку.

Дополнительное условие: ширина ни текста, ни картинки строго не определена. При отсутствии картинки текст занимает всю отведенную ширину.

Решение

Будем считать, что левая колонка может содержать не только картинку, а что-либо еще. Поэтому HTML у нас будет выглядеть так (вообще говоря, класс photo можно было бы присвоить самому img и обойтись без div’а):

Пробуем написать стили. С левой колонкой все ясно:

Теперь рисунок стал слева, а текст обошел его справа. Но если текста больше, он будет «подныривать» под рисунок (см. картинку выше), а этого-то нам и не нужно.

Первое, что приходит в голову — «зафлоатить» и текст. Но в этом случае, если не прописать ширину текст упадет под рисунок!

Думаем дальше… Хорошим решением может показаться .description{margin-left: XXXpx}. Действительно, в некоторых ситуациях такой вариант проходит. Например, если размер картинки все-таки задан. Предположим, это резиновый блок новостей. Картинка не может быть шире, скажем 200px, а уже текст тянется и занимает всю оставшуюся ширину.

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

Запретить обтекание можно просто добавив overflow:hidden; для текстовой колонки. Тем самым мы установим для нее новый контекст форматирования (подробнее эта тема скоро будет раскрыта).

Единственный браузер, который среагирует на это неправильно — это конечно IE6. Специально для него колонке устанавливаем layout, например «флоатим» (ширину при этом задавать не понадобится).

Итак, решение поставленной задачи выглядит так:

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

Демо пример. Проверено в:

  • IE 6-8
  • Firefox 3.0-3.6
  • Opera 9.5-10.5
  • Safari 4
  • Chrome 5

Плюс

Простота. Получаем нужный эффект (в том числе и при отсутствии рисунка), причем не понадобится использовать сестринский селектор.

Минус

Overflow:hidden не применимо, если в текстовой колонке есть, например, выпадающие окошки или какие-нибудь другие выступающие элементы.

Альтернативное решение

Update 7.11.2010 by Тимур, Vladimir

Тот же эффект отмены обтекания получим, если использовать для текстовой колонки display:table-cell; (или table). Для IE6-7 опять же придется устанавливать layout:

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

xiper.net

Как сделать обтекание картинки текстом

С помощью свойства float можно выровнять изображение по левому (img {float: left; margin: 0 [x] [y] 0;}) или по правому (img {float: right; margin: 0 0 [x] [y];}) краю веб-страницы или блока-контейнера.

Чтобы картинка не сливалась с текстом, для нее добавляют соответствующие значения свойства margin.

Отменить обтекание следующего блока текста или заголовка можно при помощи конструкции h2, p {clear: left;} или h2, p {clear: right;}.

Также можно расположить изображение по центру страницы img {display: block; margin: 0 auto;}, или сделать обтекание картинки текстом с двух сторон, обернув каждый блок текста в отдельный абзац.

Разметка HTML

<h1>List of towns in England</h1>  <h2>Amersham</h2>  <p><img class="left" src="https://html5book.ru/wp-content/uploads/2015/02/Amersham.jpg">Amersham is ...</p>    <h2>Buxton</h2>  <p><img class="right" src="https://html5book.ru/wp-content/uploads/2015/02/Buxton.jpg">Buxton is ...</p>    <h2>Chesterfield</h2>  <p class="columns">Chesterfield is ...</p>  <img class="img-center" src="https://html5book.ru/wp-content/uploads/2015/02/Chesterfield.jpg">  <p class="columns">It has ...</p>    <h2>Dartmouth</h2>  <p><img class="center" src="https://html5book.ru/wp-content/uploads/2015/02/Dartmouth.jpg">Dartmouth is ...</p>

CSS стили

body {   margin: 0;   background: #FFF8E8;   padding: 0 20px;   font-size: 90%;   counter-reset: h2; /*создаем счетчик для любого заголовка h2*/  }  h1 {   font-family: 'Lora', serif;   color: #564C4A;   font-weight: 300;  }  h2 {   font-family: 'Lora', serif;   color: #B00D22;   font-weight: 300;   clear: both; /* отменяем обтекание с обеих сторон */    padding: 1em 0 0.25em;   border-bottom: 2px solid;   counter-increment: h2; /* задаем увеличение нумерации заголовков h2 на единицу */  }  h2:before {   content: " " counter(h2) '. '; /* добавляем в начале каждого заголовка текущее значение счетчика и точку с пробелом */  }  p {   font-family: arial;   color: #785F5B;   line-height: 1.3;  }    /********** картинка слева **********/  .left {   float: left;   margin: 0 1em 1em 0;  }    /********** картинка справа **********/  .right {   float: right;   margin: 0 0 1em 1em;  }    /********** картинка между текста **********/  .columns {   float: left;   max-width: 30%;   margin: 0;  }  .img-center {   float: left;   margin: 0 1.5% 0 1.5%;   max-width: 37%;  }  /********** картинка по центру********* */  .center {   display: block;   margin: 0 auto 1.5%;  }

Обтекание картинки с двух сторон

float-middle

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

Разметка HTML

<div class="wrap">   <img src="cat.jpg">   <div class="left">   <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>   </div>   <div class="right">   <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>   </div>  </div>

CSS стили

.wrap {   width: 60%;   margin: 80px auto;   position: relative;  }  img {   position: absolute;   top: 0;   left: 50%;   margin-left: -125px;  }  .left {   float: left;   width: 49%;  }  .right {   float: right;   width: 49%;  }  .left:before, .right:before {   content: "";   width: 125px;   height: 250px;  }  .left:before {   float: right;  }  .right:before {   float: left;  }

html5book.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.