Как сделать чтобы текст обтекал картинку css
Перейти к содержимому

Как сделать чтобы текст обтекал картинку css

  • автор:

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

Для того, чтобы сделать обтекание текста по контуру картинки с прозрачным фоном в HTML, можно использовать свойство CSS shape-outside .

Необходимо добавить изображение на страницу HTML:

 src="path/to/image.png" alt="image" class="image" /> 

Далее, добавить стили CSS для изображения:

.image  float: left; shape-outside: url('path/to/image.png'); shape-margin: 20px; > 

Добавляем текст, который будет обтекать изображение:

 class="text"> Текст, который будет обтекать изображение.  

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

.text  overflow: hidden; > 

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

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

5ee0fb6c0ed8c403641319.jpeg

  • Вопрос задан более трёх лет назад
  • 139 просмотров

Комментировать

Решения вопроса 1

OSMANOF

Segmentation fault

Использовать float.

image 

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta unde, quisquam voluptates libero praesentium, asperiores ratione ea deserunt at quaerat animi quo! Mollitia iusto nisi obcaecati alias similique, doloribus, eos.

Так делать — правильно. Свойство float создает обтекание. Мы указали значение left, значит картинка будет находиться слева. Можно указать, также, значение right (полный список значений можно найти в документации свойства). То есть, по сути, текст обтекает картинку справа, а вместе с ним, идущий за ним элемент (остальные элементы, идущие за текстом ведут себя нормально). И, чтобы убрать обтекание следующего элемента ему необходимо присвоить свойство clear со значением both. Это уберет обтекание. Надеюсь, помог))

Ответ написан более трёх лет назад

Комментировать

Нравится 1 Комментировать

Float

Первоначально используемое для «обтекания» картинок текстом, свойство float стало одним из наиболее часто используемых инструментов для создания макетов из нескольких столбцов на веб-страницах. С появлением flexbox и grid оно снова используется как задумывалось в начале, о чем подробнее в этой статье.

Предварительные требования: Базовое знакомство с HTML (изучите Введение в HTML), а также идея о том как работает CSS (изучите Введение в CSS.)
Задача: Научиться как создавать обтекаемые свойства на веб-страницах и как использовать свойство clear и другие методы очистки обтекаемых элементов.

Общие сведения о float

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

Но разработчики быстро осознали, что можно обтекать всё что угодно, не только изображения, поэтому использование float расширилось, например для вёрстки забавных эффектов таких как drop-caps (буквица).

Floats очень часто использовались для создания макетов целых веб-страниц, отображающих несколько колонок информации, обтекаемых так, что колонки располагаются друг за другом (поведение по умолчанию предполагает, что колонки должны располагаются друг за другом, в том же порядке в котором они появляются в источнике). Доступны более новые, лучшие методы и поэтому использование floats для этих целей следует рассматривать как устаревшей техникой (en-US) .

В этой статье мы сконцентрируемся только на надлежащем использовании floats.

Простой пример float

Давайте выясним как использовать floats. Мы начнём с очень простого примера включающего обтекание элемента блоком текста. Вы можете следовать за нами создав новый index.html файл на вашем компьютере, заполнив его простым шаблоном HTML, и вставив код ниже в подходящее место. В конце раздела вы можете увидеть живой пример того, как должен выглядеть финальный код.

Во-первых, мы начнём с некоторого простого HTML — добавьте следующее в body вашего HTML, удалив всё что там было до этого:

h1>Simple float exampleh1> div class="box">Floatdiv> p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. p> p> Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien. p> p> Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. p> 

А теперь примените следующий CSS для вашего HTML (используя элемент или на отдельный файл .css — на ваше усмотрение):

body  width: 90%; max-width: 900px; margin: 0 auto; font: 0.9em/1.2 Arial, Helvetica, sans-serif; > .box  width: 150px; height: 100px; border-radius: 5px; background-color: rgb(207, 232, 220); padding: 1em; > 

Если вы сохраните и обновите сейчас, то вы увидите нечто похожее на то, чего ожидаете — блок располагается выше текста, при нормальном потоке. Для того чтобы текст обтекал его вокруг добавьте два свойства к правилу .box :

.box  float: left; margin-right: 15px; width: 150px; height: 100px; border-radius: 5px; background-color: rgb(207, 232, 220); padding: 1em; > 

Если вы сохраните и обновите сейчас, то вы увидите нечто похожее на следующее:

h1>Simple float exampleh1> div class="box">Floatdiv> p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. p> p> Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien. p> p> Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. p> 
body  width: 90%; max-width: 900px; margin: 0 auto; font: 0.9em/1.2 Arial, Helvetica, sans-serif; > .box  float: left; margin-right: 15px; width: 150px; height: 150px; border-radius: 5px; background-color: rgb(207, 232, 220); padding: 1em; > 

Обтекание контента справа имеет точно такой же эффект, но наоборот — обтекаемый элемент будет прилипать справа, а контент будет оборачивать вокруг слева. Попробуйте изменить значение на right и замените margin-right на margin-left в последнем наборе правил, чтобы увидеть каков результат.

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

Добавьте класс special к первому параграфу текста, тот который непосредственно следует за обтекаемым блоком, далее добавьте следующие правила в ваш CSS. Они дадут нашему параграфу цвет фона.

.special  background-color: rgb(79, 185, 227); padding: 10px; color: #fff; > 

Чтобы эффект был лучше виден, измените margin-right обтекаемого объекта на margin , так вы получите пространство вокруг него. Вы сможете увидеть фон параграфа располагающегося прям под обтекаемым блоком, как на примере ниже.

h1>Simple float exampleh1> div class="box">Floatdiv> p class="special"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. p> p> Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien. p> p> Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. p> 
body  width: 90%; max-width: 900px; margin: 0 auto; font: 0.9em/1.2 Arial, Helvetica, sans-serif; > .box  float: left; margin: 15px; width: 150px; height: 150px; border-radius: 5px; background-color: rgb(207, 232, 220); padding: 1em; > .special  background-color: rgb(79, 185, 227); padding: 10px; color: #fff; > 

Линейные блоки нашего последующего элемента были сокращены так что текст располагается вокруг обтекаемого объекта, но из-за того, что обтекаемый объект удаляется из нормального потока блок вокруг параграфа все ещё остаётся в полную ширину.

Очистка обтекания

Мы увидели, что обтекаемый объект удалён из нормального потока и что другие элементы будут располагаться за ним, поэтому если мы хотим остановить перемещение следующего элемента нам необходимо очистить его; что достигается при помощи свойства clear .

Добавьте класс cleared ко второму параграфу после обтекаемого элемента в ваш HTML из предыдущего примера. Далее добавьте следующий CSS:

.cleared  clear: left; > 
h1>Simple float exampleh1> div class="box">Floatdiv> p class="special"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. p> p class="cleared"> Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien. p> p> Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. p> 
body  width: 90%; max-width: 900px; margin: 0 auto; font: 0.9em/1.2 Arial, Helvetica, sans-serif; > .box  float: left; margin: 15px; width: 150px; height: 150px; border-radius: 5px; background-color: rgb(207, 232, 220); padding: 1em; > .special  background-color: rgb(79, 185, 227); padding: 10px; color: #fff; > .cleared  clear: left; > 

Вы должны увидеть, что следующий параграф очищает float элемента и больше не появляется рядом с ним. Свойство clear принимает следующие значения:

  • left : очищает объекты, обтекаемые слева.
  • right : очищает объекты, обтекаемые справа.
  • both : очищает любые обтекаемые объекты, слева или справа.

Очистка блоков обёрнутых вокруг обтекаемых элементов

Вы теперь знаете, как очистить что-либо следующее за обтекаемым элементом, но давайте посмотрим, что происходит если у вас имеется высокий обтекаемый объект и короткий параграф с блоком, оборачивающим оба элемента. Измените ваш документ так чтоб первый параграф и наш обтекаемый блок были обёрнуты в с классом wrapper .

div class="wrapper"> div class="box">Floatdiv> p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. p> div> 

В вашем CSS добавьте следующее правило для класса .wrapper и обновите страницу:

.wrapper  background-color: rgb(79, 185, 227); padding: 10px; color: #fff; > 

В добавок удалите класс .cleared :

.cleared  clear: left; > 

Вы увидите, что, точно так же как и в примере где мы устанавливаем цвет фона для параграфа, цвет фона располагается за обтекаемым объектом.

h1>Simple float exampleh1> div class="wrapper"> div class="box">Floatdiv> p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. p> div> p class="cleared"> Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien. p> p> Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. p> 
body  width: 90%; max-width: 900px; margin: 0 auto; font: 0.9em/1.2 Arial, Helvetica, sans-serif; > .wrapper  background-color: rgb(79, 185, 227); padding: 10px; color: #fff; > .box  float: left; margin: 15px; width: 150px; height: 150px; border-radius: 5px; background-color: rgb(207, 232, 220); padding: 1em; > 

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

Clearfix hack

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

Добавьте следующий CSS в наш пример:

.wrapper::after  content: ""; clear: both; display: block; > 

Теперь перезагрузите страницу и блок должен быть очищенным. По сути, это то же самое, как если бы вы добавили HTML-элемент такой как ниже объекта и установили clear: both .

h1>Simple float exampleh1> div class="wrapper"> div class="box">Floatdiv> p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. p> div> p class="cleared"> Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien. p> p> Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. p> 
body  width: 90%; max-width: 900px; margin: 0 auto; font: 0.9em/1.2 Arial, Helvetica, sans-serif; > .wrapper  background-color: rgb(79, 185, 227); padding: 10px; color: #fff; > .box  float: left; margin: 15px; width: 150px; height: 150px; border-radius: 5px; background-color: rgb(207, 232, 220); padding: 1em; > .wrapper::after  content: ""; clear: both; display: block; > 

Использование overflow

Альтернативный метод — это задать свойство overflow для обёртки (wrapper) на значение отличное от visible .

Удалите clearfix CSS который вы добавляли в предыдущей секции и вместо него добавьте overflow: auto к правилу для обёртки. Блок снова должен быть очищен.

.wrapper  background-color: rgb(79, 185, 227); padding: 10px; color: #fff; overflow: auto; > 
h1>Simple float exampleh1> div class="wrapper"> div class="box">Floatdiv> p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. p> div> p class="cleared"> Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien. p> p> Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. p> 
body  width: 90%; max-width: 900px; margin: 0 auto; font: 0.9em/1.2 Arial, Helvetica, sans-serif; > .wrapper  background-color: rgb(79, 185, 227); padding: 10px; color: #fff; overflow: auto; > .box  float: left; margin: 15px; width: 150px; height: 150px; border-radius: 5px; background-color: rgb(207, 232, 220); padding: 1em; > 

Этот пример работает путём создания того, что известно как Блочный Контекст Форматирования (block formatting context (BFC)). Это как мини макет внутри вашей страницы, внутри которого содержится все, следовательно наш обтекаемый элемент находится внутри BFC и фон располагается за обоими элементами. Обычно это будет срабатывать, однако, в определённых случаях вы можете обнаружить нежелательную полосу прокрутки или обрезанные тени из-за непреднамеренный последствий использования overflow.

display: flow-root

Современный способ решения этой проблемы — это использование значения flow-root свойства display . Он существует только для создания BFC без использования хака — не будет возникать непреднамеренных последствий, когда вы используете его. Удалите overflow: auto из вашего правила .wrapper и добавьте display: flow-root . Если предположить, что у вас поддерживающий браузер, блок будет очищаться.

.wrapper  background-color: rgb(79, 185, 227); padding: 10px; color: #fff; display: flow-root; > 
h1>Simple float exampleh1> div class="wrapper"> div class="box">Floatdiv> p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. p> div> p class="cleared"> Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien. p> p> Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. p> 
body  width: 90%; max-width: 900px; margin: 0 auto; font: 0.9em/1.2 Arial, Helvetica, sans-serif; > .wrapper  background-color: rgb(79, 185, 227); padding: 10px; color: #fff; display: flow-root; > .box  float: left; margin: 15px; width: 150px; height: 150px; border-radius: 5px; background-color: rgb(207, 232, 220); padding: 1em; > 

Проверьте свои навыки!

Вы достигли конца этой статьи, но помните ли вы самую важную информацию? Вы можете найти дополнительные тесты, чтобы убедиться, что вы усвоили эту информацию, прежде чем двигаться дальше — см. Проверка ваших навыков: Floats.

Заключение

Теперь вы знаете все, что нужно знать о float в современной веб-разработке. См. Статью об устаревших методах макета (en-US) устаревших методах макета для получения информации о том, как они использовались раньше, что может быть полезно, если вы работаете над старыми проектами.

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 2 дек. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Как сделать обтекание картинки текстом и добавить этой картинке подпись?

По вот этому гайду вставил картинку в свой проект: https://webformyself.com/kak-sdelat-v-html-podpis-pod-kartinkoj/
Но мне нужно обтекание, текстом картинки с подписью, иначе выходит ужасно, есть какие то способы по этому методу дать обтекание текстом или наоборот, как подписать картинку, что бы сохранить обтекание? Так-же делал обтекание через float, но я не нашёл способ подписать картинку

function showHide(element_id) < if (document.getElementById(element_id)) < var obj = document.getElementById(element_id); if (obj.style.display != "block") < obj.style.display = "block"; >else obj.style.display = "none"; > else alert("Элемент с id: " + element_id + " не найден!"); >
.leftimg < float:left; margin: 7px 7px 7px 0; >.rez p < text-align: center; >.rez
 Работа Тимофеева Дениса   

Остров Валаам valaam.ru

Валаам - остров в северной части Ладожского озера, самый большой в составе Валаамского архипелага. На острове расположен посёлок Валаам, входящий в Сортавальское городское поселение, и Валаамский ставропигиальный мужской монастырь, являющийся памятником русского зодчества. Название острова, возможно, происходит от финно-угорского слова «валамо» - высокая (горная) земля.
Остров неоднократно посещали императоры Александр I и Александр II, другие члены императорской фамилии. Также приезжал на Валаам святитель Игнатий (Брянчанинов). Природа Валаама вдохновляла известнейших гениев творчества и науки.

Здесь побывали художники И.И. Шишкин, Ф.А. Васильев, А.И. Куинджи, писатели и поэты Н.С. Лесков, Ф.И. Тютчев, А.Н. Апухтин, И.С. Шмелёв, Б.К. Зайцев, композиторы П.И. Чайковский, А.К. Глазунов, учёные М.Н. Миклухо-Маклай, Д.И. Менделеев и множество других. В XIX веке во время своего путешествия по России остров посетил Александр Дюма-отец.

К.Гоголев. «На пристани»(резьба по дереву).

Хорошо известны валаамские пейзажи, написанные И.И. Шишкиным («Вид Валаама», 1860), А.И. Куинджи («На острове Валаам», 1873) и Николаем Рерихом («Святой остров», 1917). Ряд современных художников, в частности, известный петрозаводский график А.И. Авдышев, в 1970-х годах создал серию черно-белых линогравюр. Приезжал на Валаам и посвящал ему свои работы мастер объёмной резьбы по дереву, сортавальский художник Кронид Гоголев. Назовите ближайший город, из которого можно приехать на о. Валаам:

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

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