Computer help - file server


[ Blog ] - [ File Server ] - [ Удаленная компьютерная помощь ]

Нужен код для обтекания изображения текстом? Обычно, когда вы создаете HTML-страницу, все идет линейно, то есть один блок следует за другим. Все мои предыдущие сообщения являются примером этого, т.е. текст, затем изображение, затем текст и т. Д.

Иногда вы можете захотеть включить текст рядом с изображением, а не под ним. Это называется обтеканием изображения текстом. На самом деле довольно легко обернуть текст с помощью HTML. Обратите внимание, что вам не обязательно использовать CSS для переноса текста.



Однако в наши дни W3C рекомендует использовать CSS вместо HTML для такого рода задач.Я упомяну оба метода ниже, но если вы можете, лучше использовать CSS, так как он более адаптируется к адаптивному дизайну веб-сайтов. Перенос текста вокруг изображения с помощью HTML



Lorem ipsum dolor sit amet ,conctetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet.Ut pellentesque nunc in lorem egestas non imperdiet enim congue.

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

Здесь идет ваш текст.

Если вы хотите, чтобы текст отображался слева, а изображение - справа, просто измените параметр выравнивания на «right».



Lorem ipsum dolor sit amet, conctetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis.Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.

Здесь идет ваш текст.

Вот и все! Довольно просто, правда? Единственный раз, когда вы захотите использовать CSS, - это если вы хотите добавить поля к изображениям, чтобы между текстом и изображением оставалось некоторое пространство.

Вы можете добавить поля к изображению, используя следующий код стиля CSS:

Здесь идет ваш текст.

В приведенном выше коде используется элемент CSS MARGIN для добавления 10 пикселей пробела в правой части изображения. Поскольку мы выровняли изображение по левому краю, мы хотим добавить пробел справа.

В основном, четыре числа представляют ВЕРХНУЮ ПРАВО ВНИЗ ЛЕВО. Поэтому, если вы хотите добавить пробел к изображению с выравниванием по правому краю, сделайте следующее:

Здесь идет ваш текст.

Таким образом, довольно просто использовать HTML для выполнения этой задачи, но, опять же, он может не работать для адаптивных сайтов.Обтекание текстом изображения с помощью CSS

Лучший способ обернуть текст вокруг изображения - использовать CSS. Это дает вам более точный контроль над расположением элементов и лучше работает с современными стандартами кодирования.

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

В теге IMG вы просто назначаете класс тегу и даете ему имя.В моем примере я назвал класс left. Все, что мне нужно сделать в моей таблице стилей, - это добавить следующий код: .left {float: left; padding: 0 10px 0 0;}

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

Как видите, это намного чище, чем добавлять весь этот код в сам тег IMG. Им также легче управлять, и вы можете использовать гораздо больше свойств CSS для настройки внешнего вида своей веб-страницы.Если у вас есть вопросы, не стесняйтесь комментировать. Наслаждайтесь!

.
SETUP UA COMPUTER BLOG