Html картинка слева от текста: Как сделать, чтобы фотография располагалась по правому краю окна браузера?

Leave a Comment / Html / By /

Содержание

Как сделать, чтобы фотография располагалась по правому краю окна браузера?

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
4.0+1.0+4.0+1.0+1.0+1.0+1.0+

Задача

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

Решение

По умолчанию, изображение на странице располагается по левому краю окна браузера, а близлежащий текст выравнивается по нижней кромке изображения. Чтобы задать выравнивание по правому краю для селектора IMG следует установить стилевое свойство float со значением right.

Не все рисунки на странице следует выравнивать указанным образом, поэтому лучше ввести специальный класс, назовем его rightpic, и будем добавлять его только к нужным изображениям. Также вокруг рисунка желательно добавить отступы через свойство margin, чтобы между текстом и изображением появилось пустое пространство (пример 1).

Пример 1. Изображение по правому краю

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Выравнивание фотографии</title>
  <style>
   .rightpic {
    float: right; /* Выравнивание по правому краю */
    margin: 0 0 5px 5px; /* Отступы вокруг фотографии */
   }
  </style>
 </head>
 <body>
  <p><img src="images/rock.jpg" alt="Иллюстрация" 
  >
  Гармония, в первом приближении, параллельно образует экзистенциальный 
  художественный талант, как и предсказывает теория о бесполезном знании. 
  Действие, в том числе, выстраивает понимающий архетип, однако само по 
  себе состояние игры всегда амбивалентно. Композиция, в представлении 
  Морено, диссонирует невротический объект, что-то подобное можно встретить 
  в работах Ауэрбаха и Тандлера. Бессознательное, конечно, диссонирует 
  экспериментальный символизм, таким образом осуществляется своего рода 
  связь с темнотой бессознательного.
 
  После того как тема сформулирована, 
  либидо параллельно.</p>
  <p>Иррациональное в творчестве начинает психоз, это обозначено Ли Россом как 
  фундаментальная ошибка атрибуции, которая прослеживается во многих экспериментах. 
  Индивидуальность аккумулирует комплекс, именно об этом комплексе движущих сил 
  писал З.Фрейд в теории сублимации. Иными словами, рефлексия использует элитарный 
  стресс, это же положение обосновывал Ж.Польти в книге "Тридцать шесть 
  драматических ситуаций". Как было показано выше, эриксоновский гипноз 
  иллюстрирует социометрический онтогенез, что лишний раз подтверждает правоту
  З.Фрейда.</p> 
 </body>
</html>

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

Рис. 1. Фотография, выровненная по правому краю

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

Делаем обтекание картинки текстом на HTML и CSS ⋆

Быстрая навигация по этой странице:

Правильное и красивое размещение всех объектов на странице — неотъемлемый элемент дизайна любого уважающего себя сайта. Как всегда, здесь не обойтись без CSS. Дело в том, что обтекание картинки текстом HTML сам по себе делает (с помощью атрибутов align=left, align=right тега img), но он при этом не создает отступов. Потому без CSS все-таки не обойтись.


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

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

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

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

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

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


<img src="моя_картинка.jpg" />

Теперь пропишем соответствующие свойства в 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>Текст, который будет наложен на картинку</div>

 


. my_block {
background: url (my_img.jpg) top left no-repeat; 
width: 500px;
height: 300px;
padding: 400px 0 0 0; 
}

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

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

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


<div>
<img src="моя_картинка.jpg" />
<div>Текст, который будет наложен на картинку</div>
</div>


.img { 
width:500px; 
height: 300px;
position: relative;
}
.text {
background-color: #FFF; 
width: 500px; 
height: 50px; 
position: absolute; 
left: 0px; 
top: 450px;
}

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

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

Текст рядом с изображением html

В этой статье мы разберем варианты, как сделать обтекание картинки текстом. Всего есть несколько способов. Рассмотрим каждый из них. Для начала советую ознакомиться со статье 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 для картинок, что очень даже удобно.

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+1.0+4.0+1.0+1.0+1.0+1.0+

Задача

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

Решение

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

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

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

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

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

Рисунок по центру

Для выравнивания изображения по центру колонки текста, тег помещается в контейнер

, для которого устанавливается атрибут align=»center» . Но если предполагается активное использование иллюстраций, то лучше создать новый стилевой класс, назовем его fig , и применим его для нужных абзацев, как показано в примере 1.

Пример 1. Выравнивание рисунка по центру

В данном примере класс fig добавляется к селектору P , а способ выравнивания определяется свойством text-align . Положение рисунка относительно текста схематично показано на рис. 1.

Рис. 1. Рисунок в центре колонки текста

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

Обтекание картинки текстом — один из популярных приемов верстки веб-страниц, когда изображение располагается по краю окна браузера, а текст обходит его с других сторон (рис. 2). Для создания обтекания изображения текстом существует несколько способов, связанных, как с возможностью тегов HTML, так и с применением стилей.

Рис. 2. Рисунок выровнен по левому краю и обтекается текстом справа

Так, у тега есть атрибут align , который определяет выравнивание изображения. Этот атрибут задает, возле какого края окна будет располагаться рисунок, одновременно устанавливая и способ обтекания текста. Чтобы выровнять изображение по правому краю и задать обтекание слева, используют значение right , для выравнивания по левому краю применяют left . Атрибут align часто используют в связке с другими атрибутами тега — vspace и hspace . Они определяют расстояние от обтекаемого текста до изображения. Без этих атрибутов изображение и текст будут слишком плотно прилегать друг к другу (пример 2).

Пример 2. Использование свойств тега

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

Для обтекания картинки текстом также можно применить стилевое свойство float . Значение right будет выравнивать изображение по правому краю окна браузера, а текст заставляет обтекать рисунок слева (пример 3). Значение left , наоборот, выравнивает изображение по левому краю, а текст — справа от рисунка.

Пример 3. Использование стилей

В данном примере к тегу добавляется класс fig , для которого установлено выравнивание по правому краю и, соответственно, обтекание картинки слева. Чтобы текст не прилегал плотно к изображению, применяются свойства padding-left и padding-bottom .

Рисунок на поле

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

Рис. 3. Изображение размещается на поле слева от текста

Существует несколько методов достижения подобного результата. Рассмотрим два из них — использование таблицы и применение стилевого свойства margin .

Применение таблиц

Таблицы удобны тем, что позволяют легко создать структуру колонок с помощью ячеек. Потребуется таблица с тремя ячейками, в одной будет располагаться изображение, во второй текст, а третья нужна, чтобы создать отступ между ними. Можно также обойтись и двумя ячейками, а нужное расстояние задать через стили или с помощью атрибута width тега

. В примере 4 показано создание указанной таблицы.

Пример 4. Создание рисунка на поле с помощью таблиц

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

Рис. 4. Изображение слева от текста

В данном примере ширина рисунка составляет 90 пикселов, а ширина колонки, где он располагается — 110 пикселов. Разница между ними и обеспечивает нужное расстояние от текста до картинки. Чтобы атрибуты таблицы cellspacing и cellpadding не вмешивались в процесс, их значения лучше обнулить. Обратите внимание, что в ячейках задается выравнивание по высоте.

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

В данном случае потребуется два слоя, параметры которых будем изменять через CSS. Изображение поместим в слой с именем pic , а текст, сильно не мудрствуя, в слой text . Теперь для слоя piс следует установить свойство float со значением left , а для text — margin-left . Значение этого параметра равно ширине рисунка плюс необходимый отступ до текста (пример 5).

Пример 5. Использование margin

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

Если рисунок следует расположить справа от текста, то значение float меняем на right , а свойство margin-left на margin-right .

Выравнивание изображения. HTML, XHTML и CSS на 100%

Выравнивание изображения

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

Есть множество вариантов выравнивания картинок относительно текста, и за все отвечает атрибут align элемента IMG. Он позволяет выравнивать изображения с правой, с левой стороны окна или относительно элементов строки.

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

Горизонтальное выравнивание:

• left – по левому краю;

• right – по правому краю.

Вертикальное выравнивание:

• top – выравнивание верхней границы картинки по самому высокому элементу строки;

• texttop – выравнивание верхней границы картинки по самому высокому элементу текста;

• middle – середина изображения выравнивается по базовой линии строки;

• absmiddle – середина изображения выравнивается по середине строки;

• baseline – выравнивание нижней границы изображения по базовой линии строки;

• bottom – аналогично baseline;

• absbottom – нижняя граница изображения выравнивается по нижней границе текущей строки.

Примечание

Базовая линия строки – это линия, на которой расположены все элементы. При этом некоторые буквы выступают за эту линию, например буква «р». Ее палочка заканчивается ниже базовой линии и будет самым нижним элементом строки. Заглавные буквы, наоборот, выступают сверху этой линии.

В листинге 4.3 приведены примеры выравнивания картинок относительно текста по вертикали.

Листинг 4.3. Выравнивание картинки по вертикали

<html>

<head>

<title>Встраивание изображения</title>

</head>

<body>

<img src=»image.jpg» align=»top»/>Выравнивание по самому верхнему элементу в строке<br/>

<img src=»image.jpg» align=»absbottom»/>Нижняя граница изображения выравнивается по нижней границе текущей строки<br/>

<img src=»image.jpg» align=»bottom»/>Нижняя граница изображения выравнивается по базовой линии строки<br/>

<img src=»image.jpg» align=»middle»/>Середина изображения выравнивается по базовой линии строки<br/> </body>

</html>

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

Рис. 4.3. Выравнивание по вертикали

С выравниваниями по горизонтали все проще. Код для выравнивания по горизонтали приведен в листинге 4.4.

Листинг 4.4. Выравнивание картинки по горизонтали

<html>

<head>

<title>Встраивание изображения</title>

</head>

<body>

<img src=»image.jpg» align=»right» />

Кролики – потрясающие животные, особенно декоративные. Многие люди заводят их дома вместо кошек или собак, потому что они менее прихотливы. Кролики – чистоплотные животные, и их хозяева не испытывают проблем с воспитанием. Кормить этих зверюшек просто: овощи, сено и немного специального корма. Следите, чтобы клетка была чистой и в ней всегда лежали свежие опилки. Если вы рискуете выпускать зверя на прогулки по дому, то следите за проводами. Кролик может решить, что провода – это сено, и перегрызть их. </html>

На рис. 4.4 виден результат обработки браузером кода из листинга 4.4, текст обтекает картинку слева.

Рис. 4.4. Выравнивание по горизонтали

При горизонтальном выравнивании текст плотно обтекает картинку и для внешнего вида страницы важным параметром становится расстояние между текстом и изображением.

Данный текст является ознакомительным фрагментом.

Продолжение на ЛитРес

Img — Html тег для вставки картинки (Src), выравнивания и обтекание ее текстом (align), а так же задания фона (background)

Обновлено 10 января 2021
  1. Тега Img и его атрибуты Src, Width и Height
  2. Как вставить картинку с ссылкой, назначение Alt и Title
  3. Обтекание картинки текстом в Html — атрибут Align
  4. Background — как задать фон для сайта в чистом Html

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Про то, какие именно форматы растровой графики (Gif, Png, Jpg) и в каких случаях лучше всего будет использовать для вставки картинок на страницы своего сайта, мы подробно успели поговорить с статье, ссылка на которую приведена чуть выше.

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

Использование тега Img и его атрибутов Src, Width и Height

Итак, давайте посмотрим, как можно использовать графику на своем сайте. Во-первых, это возможность вставки изображения как элемента (объекта) в Html код страницы. Как раз именно такая вставка осуществляется с помощью Img, который является особенным — строчным элементом с замещаемым контентом, к которым относятся всего лишь четыре элемента языка гипертекстовой разметки, одни из которых мы уже упомянули, а три остальных — Iframe (современный вариант использования фреймов), Object и Embed (для вставки видео и другого медиа контента).

Ведет себя он в точности как строчный элемент, но вот внутри него отображается посторонний внешний контент (фото в случае Img или видео и флеш в случае Object и Embed). Любой из этих четырех элементов подразумевает наличие внешнего файла, который будет подгружаться вот в эту самую область, заданную в нем атрибутами.

Для указания пути до графического файла, который должен подгружаться на страницу, служит специальный атрибут Src.

<img src="путь_до_файла_изображения">

Браузер пользователя при разборе Html кода страницы, как только встретит в нем тэг Img, сразу же создает область для строчного элемента, в которую загружается внешний файл (например, фотография). Путь до файла браузер берет из содержимого Src.

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

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

<img src="путь до файла изображения">

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

На сервер заливается графический файл огромного размера и весом в несколько мегабайт (сразу после фотографирования без обработки) и прописывается до него путь в Src. А для того, чтобы изображение не занимало бы весь экран, в тэг Img дописывают Width и Height с приемлемыми размерами по ширине и высоте.

И что получается в результате? Посетитель такого сайта наблюдает удручающе медленную подгрузку изображения в сравнительно малую область, заданную в упомянутых атрибутах (несколько мегабайт веса вписываются в размер 300 на 400 пикселов).

Поэтому сразу же делайте картинки для выкладывания в Веб того самого размера, который вы будете показывать на сайте и прописывать в Width и Height тега Img. Уважайте своих пользователей и не тратьте понапрасну их трафик (особенно мобильный). Сжать фото можно, например, в FastStone Image Viewer или любом другом графическом ректоре, например, онлайн фотошопе Пикслр.

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

Теперь давайте посмотрим, каким образом можно указать путь до файла с изображением в Src тега Img. Собственно, можно использовать и относительные, и абсолютные ссылки, о которых я уже довольно подробно писал в приведенной статье. Все зависит от нюансов и удобства.

Т.е. Src может содержать, например, следующие записи:

<img src="название_файла">
<img src="папка/название_файла">
<img src="https://ktonanovenkogo.ru/папка/название_файла">

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

И тут следует обратить внимание, что картинка, которую вы вставляете в Html код, может лежать абсолютно на любом сервере. Т.е. вы можете, допустим, скопировать путь до нее на моем блоге и вставить этот путь в атрибут Src тэга Img на своем сайте. Все будет прекрасно работать, правда, если я не запрещу подобные действия в .htaccess на своем сервере, но это уже отдельная песня (погуглите на тему «Защита от хотлинков»).

Вообще, по правилам языка Html, на вашем сервере обязан находиться только сам документ (web страница), а все остальные документы и файлы (графика, видео, скрипты, стили), которые будут подгружаться вместе с ним, могут находиться на разных серверах.

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

Как вставить картинку с ссылкой, назначение Alt и Title в Img?

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

<a href="https://ktonanovenkogo.ru"><img src="https://ktonanovenkogo.ru/image/webcamxp.png"></a>

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

<a href="https://ktonanovenkogo.ru"><img border=0 src="https://ktonanovenkogo.ru/image/webcamxp.png"></a>

Для всех тех случаев, когда графический файл по каким-либо причинам не может подгрузиться вместе с Html документом (путь до него прописан не верно или же еще что-то), предусмотрен специальный атрибут Alt.

Alt выполняет роль альтернативного представления изображения. Что происходит в том случае, когда графика не грузится? Браузер все равно, обнаружив в коде элемент Img, формирует под него область, которая в зависимости от используемого пользователем браузера может либо оставаться заданного размера, либо схлопываться.

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

<img src="путь до файла изображения" >

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

Делается это с помощью специального атрибута Title, который в нашем случае вставляется в Img. Он по сути является всплывающей подсказкой и его можно использовать практически для всех видимых на странице элементах Html кода, когда вам нужно что-то дополнительно пояснить.

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

<img src="https://ktonanovenkogo.ru/image/rss_no_drop1.pngя" alt="" title="">

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

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

Ключевые слова в Alt и Title (особенно в Alt) могут заметно улучшить ранжирование вашего сайта, а так в сервисах поиска по изображениям (картинкам) Яндекса или Google. Однако с этим нужно быть осторожным, ибо довольно легко можно попасть под фильтр за спам от Яндекса или Гугла.

Обтекание картинки текстом в Html — атрибут Align тега Img

Теперь давайте поговорим про выравнивание вставленных изображений в Html коде. У всех четырех строчных элементов с замещаемым контентом (Img, Iframe, Object и Embed) есть возможность выравнивания с помощью атрибута Align. Но он вообще-то применяется только для блочных элементов, а упомянутые теги — строчные.

Поэтому некоторые значения Align для Img (например, задание обтекания картинки текстом) будут означать совсем иное, нежели при использовании этого же атрибута в блочных элементах (параграфах P, заголовках h2-H6 и т.п.).

Вообще, выравнивание картинок с помощью Align при использовании в Img можно разделить на две группы.

Итак, что же происходит, когда мы вставляем графический файл в текст документа? Фактически он встает как одна большая буква:

По умолчанию используется выравнивание по нижнему краю, т.е. добавление в элемент Img атрибута align=»bottom» ничего не изменит. Но зато можно попробовать задать выравнивание картинки по верхнему краю, добавив в элемент align=»top»:

<img src="https://ktonanovenkogo.ru/image/rss_no_drop1.png" align="top">

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

Возможно еще одно значение этого атрибута align=»middle»:

<img src="https://ktonanovenkogo.ru/image/rss_no_drop1.png" align="middle">

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

Но кроме выравнивания по вертикали в Html предусмотрено и обтекание картинок текстом, для чего используются значения — Left и Right. Эта группа значений атрибута Align сильно отличается от предыдущей.

При использовании значений Left и Right внутри элемента Img мы добиваемся, так называемого, обтекания картинки текстом, которое задается в Html коде. В этом случае рисунок становится плавающим элементом (аналог Float в CSS) и текст начинает ее обтекать.

Например, при align=»left» мы получим такой результат:

<img src="https://ktonanovenkogo.ru/image/rss_no_drop1.png" align="left">

Значение Left в Img означает, что фото плавает в левую сторону, а текст ее обтекает справа. В случае align=»right» картинка будет плавать в правую сторону, а текст ее будет обтекать слева:

<img src="https://ktonanovenkogo.ru/image/rss_no_drop1.png" align="right">

При задании обтекания изображения текстом есть один нюанс — текст слишком близко располагается от него, что создает неприятный глазу эффект прилипания. Данную проблему совсем легко решить с помощью CSS свойств padding или margin, но и в чистом Html существует свое решение.

Для этого можно использовать атрибуты элемента Img — Hspace и Vspace. С помощью них отжимается обтекающий текст от изображения. Hspace задает отступы слева и справа от изображения до обтекающего его текста, а Vspace — сверху и снизу. Отступы задаются в пикселах, например:

<img src="https://ktonanovenkogo.ru/image/rss_no_drop1.png" align="left" hspace="30" vspace="30">

Background — как сделать фон для сайта в чистом Html

Графические файлы можно использовать не только как элементы кода страницы, но и как заливку в качестве ее фона. Вообще, фон для сайта в языке Html можно задать либо цветом, либо с помощью фоновых изображений. Ну, а в современной верстке с использованием свойств CSS , фоновые картинки (background image) являются одним из основных элементов, ибо никаких оформительских элементов, вставленных с помощью Img на страницах современных сайтов, нет.

Поэтому фоновые изображения играют очень важную роль в современной верстке с использованием CSS (поговорим об этом в приведенной статье). Пока же мы рассмотрим, как это все делается в чистом Html с помощью атрибута Background элемента Body и тегов таблицы Table, показывает путь до графического файла, которым будет залита web страница или же таблица (или ее отдельная ячейка).

Например, добавив в Body атрибут Background следующего вида:

<body background="https://ktonanovenkogo.ru/image/bgkletka.gif">

Мы получим фон для нашего сайта, состоящий из размноженной фотки, которой будет заполнена вся видимая область на манер плитки:

Фоновое изображение, начиная с левого верхнего угла, повторяется сразу по двум осям (абсцисс и ординат). Последующее состыковывается с предыдущим и т.д. Кстати, если вы захотите залить фон страницы или таблицы одним цветом, то для этого вам нужно использовать уже не Background, а атрибут bgcolor, в качестве значения которого вы может вставить код цвета, например, так:

<body bgcolor="#f0f8ff">

То получим следующий цвет фона заданный через bgcolor:

Точно так же, как и в случае с атрибутом background, bgcolor можно еще использовать и для задания фона всей таблицы или же отдельных ее элементов.

Внимание! Атрибуты bgcolor и background сейчас не рекомендуются к использованию. Как и другие описанные выше атрибуты, задающие обтекание и отступы. Вместо них нужно использовать соответствующие CSS свойства.

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Текст возле картинки. Самоучитель HTML

В этой главе мы научимся управлять текстом возле картинки. Т.е. изучим обтекание картинки текстом и научимся прерывать обтекание.

Давайте начнем с расположения текста возле картинки. Давайте создадим новый документ grafika_2.html:

        <html>
        <head>
        <title>текст возле картинки</title>
        </head>
        <body>
    <img src="images/moto.jpg" alt="Супер сайт">Текст... Текст... Текст... Текст
        </body>
        </html>

только вы текста вставте побольше, символов 200-500. просмотрим(откроется в новой вкладке) что у нас получилось.
Текст по умолчанию располагается по нижней линии картинки и то только одна строка, остальные переносятся под картинку.
Но эти умолчания можно изменить если задать атрибуту ALIGN нужное значение:
align=»bottomtop» текст по верхней линии картинки
align=»middle» текст по центру картинки
align=»bottom» текст внизу картинки
Не знаю зачем это нужно, не зависимо какой атрибут мы зададим и зададим ли вообще, но все равно только одна строчка будет расположена вокруг картинки, а остальные будут перенесены под картинку!!!

Чтобы текст не переносился нужно значение атрибуту ALIGN задавать right или left. Задавать можно одной картинке только один раз этот атрибут, второй и следующие просто игнорируются.
У тега IMG есть еще полезные атрибуты:
vspace— атрибут который задает расстояние в пикселях от картинки к тексту по вертикали;
hspace — атрибут задает расстояние между текстом и рисунком, но по горизонтали.
<img src=»images/moto.jpg» alt=»Супер сайт» hspace=»5″ vspace=»10″>

А что делать если картинка большая,а текста возле нее нужно всего немного?
Можно конечно «играться» тегом BR, подставлять их 2, 3, 5, 10 или 20 штук, но у этого тега как раз для таких случаев есть прекрасный атрибут clear, который принудительно обрывает обтекание картинки текстом.
Атрибут clear может принимать следующие значения:
<br clear=»all»> прерывает все обтекание;
<br clear=»left»> прерывает обтекание слева;
<br clear=»right»> прерывает обтекание справа.

        <html>
        <head>
        <title>текст возле картинки</title>
        </head>
        <body>
    <img src="images/moto.jpg" alt="Супер сайт">текст возле картинки
    <br clear="all"> текст под картинкой
        </body>
        </html>

Изображения на странице | bookhtml.ru

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

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

Теперь мы можем попробовать вставить наше изображение на страницу. Тег, отвечающий за вставку изображения в html-страницу, это тег <img> — сокращение английского слова images — изображение. Где-то между двумя абзацами пропишем тег <img>. Заметим, что тег <img> одинарный, его нет необходимости закрывать.  Просто, там где нужно вставить изображение, пишем тег <img>.

Сам по себе тег <img> ничего не значит. К нему необходимо добавить соответствующие атрибуты. Первый, самый главный атрибут этого тега — это атрибут src — сокращение английского слова source — источник. Этот атрибут указывает на место расположения самого файла изображения. Так как наш файл лежит в той же папке, нам достаточно указать имя изображения. Если бы файл картинки находился в другом месте, нам пришлось бы писать полный путь к нему.

Далее нам необходимо указать ширину и высоту данного изображения. Эти размеры мы увидим при наведении курсора мыши на файл. За ширину отвечает атрибут width, а за высоту — атрибут height. И так, добавляем к тегу <img> атрибуты с соответствующими значениями. Получим строку примерно такого вида:

<img src= «image.jpg»>

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

Если же мы хотим наше изображение выровнять по центру нам необходимо воспользоваться следующим методом: мы должны поместить изображение в абзац и уже абзац выравниваем по центру.

Пример:

<p align=»center»><img src= «image.jpg»></p>

 

Если же мы хотим разместить рисунок по правому краю, то выравниваем абзац по правому краю:

<p align=»right»><img src= «image.jpg»></p>

Правда у самого тега <img> есть атрибут выравнивания align, но он несет немножко другой смысл и сейчас мы с этим разберемся.

Давайте попробуем вставить картинку внутрь абзаца с текстом (так чтобы текст обтекал наше изображение).

Пример:

<p><img src= «image.jpg» align=»left»>текст абзаца…</p>

При добавлении к тегу <img> атрибута align со значением «left» рисунок будет размещен по левому краю страницы, а текст будет обтекать его справа. При значении «right» рисунок будет размещен по правому краю страницы, а текст слева от рисунка.

Вот таким образом работает атрибут align у изображения.

Рассмотрим еще один атрибут, применяемый при вставке изображения. Что бы избежать «прилипания» текста к изображению нам надо прописать величину отступа текста от изображения. В этом нам поможет атрибут hspace — отступ по горизонтали и атрибут vspace — отступ по вертикали.

Пример:

<p><img src= «image.jpg» align=»left» hspace=»15″ vspace»10″>

текст абзаца…</p>

Значения прописываем в пикселях.

Еще один важный атрибут изображения — атрибут alt: атрибут альтернативного текста. Значения этого атрибута — это описание изображения (что изображено на нашем рисунке). Это необходимо при просмотре пользователем страницы с отключенными изображениями (вместо рисунка он будет видеть текст его описания).

Следующий урок — создание списков

Выравнивайте и перемещайте изображения на своем веб-сайте с помощью HTML и CSS

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

Прежде чем мы углубимся в код, давайте посмотрим на разницу между выровненными и плавающими изображениями.

  • Выровненные изображения: Используя выравнивание изображения, вы можете выбрать расположение слева, по центру или справа.Текст не обтекает изображение, а будет размещен до или после него (в виде блока), в зависимости от выбранного выравнивания.
  • Плавающие изображения: Когда изображение перемещается, текст обтекает изображение. Вы можете легко определить дополнительные правила CSS, чтобы обеспечить достаточное количество пробелов вокруг изображения. Правила с плавающей запятой также обычно используются для размещения изображений в горизонтальные ряды, как вы обнаружите в галереях изображений и селекторах миниатюр.

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

Выравнивание изображения HTML

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

Выровнять по левому краю

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

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

Выровнять по правому краю

Теперь используйте этот HTML-код, чтобы выровнять изображение по правому краю текста:

Выровнять по центру

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

Этот код вставит изображение в абзацы, но это не очень чистый макет.

Выровнять по верху и низу

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

При выравнивании по верхнему краю обратите внимание, как текст Sed feugiat tincidunt tellus выравнивается по правому верхнему краю изображения.

При выравнивании по нижнему краю тот же текст выравнивается по правому нижнему краю изображения.

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

CSS плавающие изображения

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

Плавающие изображения справа с переносом текста

В этом примере мы включаем тег изображения в наш HTML-файл, но идентифицируем изображение с помощью идентификатора («hp»).

Код форматирования вызывается из отдельного файла CSS, который включает правило float: right , плюс некоторый дополнительный интервал, любезно предоставленный правилом margin .

 #hp {
float: right;
 маржа: 0 0 0 15 пикселей;
}

Как видите, получившийся макет стал более аккуратным, с обтеканием текста под изображением.

Плавающие изображения слева с переносом текста

Если изображение правильно помечено в файле HTML, вы можете просто отредактировать правило CSS, чтобы поэкспериментировать с альтернативными макетами.

 #hp {
плыть налево;
 маржа: 0 15px 0 0;
}

Без поплавка

Используйте правило float: none для отображения изображения в тексте без переноса.Вы можете сохранить правило поля (при желании) для интервала.

 #hp {
float: нет;
 маржа: 0 15px 0 0;
}

Поплавки расчистные

При перемещении изображений важно правильно использовать правило очистки. Плавающие изображения (и другие веб-элементы) будут перекрывать друг друга, если вы не «очистите» плавающий объект. Обязательно используйте правило очистки после каждого раздела, в котором плавает изображение.

В этом примере у нас есть два раздела (с использованием тегов div ), один из которых содержит изображение, а второй — изображение, текст и красную рамку.Первый раздел позиционируется с использованием правила float: left , и вы можете видеть, что он перекрывает второй раздел.

Перекрытие происходит из-за того, что мы не использовали правило очистки. Примените следующее правило CSS ко второму div:

 .div2 {
граница: сплошной красный 1px;
ясно: оба;
}

Теперь вы можете видеть, что два раздела больше не перекрываются. Правило очистить можно использовать с рядом значений:

  • нет — позволяет плавающие элементы с обеих сторон.
  • слева — плавающие элементы слева не допускаются.
  • справа — с правой стороны не допускаются плавающие элементы.
  • оба — плавающие элементы не допускаются с обеих сторон.
  • наследует — наследует чистое значение своего родителя.

Потратьте немного времени на эксперименты с правилами CSS, такими как float и clear , и скоро вы освоите выравнивание изображений и расширенные макеты страниц.

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

HTML — Текст — Перенос текста вокруг изображений

Перенос слов вокруг изображений

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

Первое, что вы можете сделать, это разместить изображение на странице.Но как заставить взаимодействовать изображения и слова?

Вы можете размещать изображения на странице с помощью атрибута ALIGN, и в этом случае вы также можете использовать значения Top, Middle или Bottom. Выбранное значение также будет определять, как прилегающий текст обтекает изображение, если рисунок включен в блочный элемент, такой как абзац

, или в заголовок, например

. Если значение ALIGN не задано, значение по умолчанию — Bottom.

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

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

Однако проблема с перемещением текста в предыдущем абзаце не так очевидна, когда вы используете значение «Вправо» или «Влево». Таким образом, следующий код разместит изображение справа, а текст будет плавно перетекать слева:

Этот текст располагается слева.

Возможны двойные обтекания

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

Этот текст отображается справа от изображения.


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

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

Этот текст отображается слева от изображения.

Дайте мне немного места

Мы видели, как разместить изображение и обвести его текстом, но вышеупомянутые методы все еще не обладают той элегантностью макета, которая возможна с программой настольных издательских систем. Во-первых, текст имеет тенденцию располагаться слишком близко к изображению. Было бы неплохо создать буферное пространство, и здесь в игру вступают HSPACE и VSPACE. HSPACE создает буфер по правой и левой сторонам изображения, тогда как VSPACE создает буфер по верхнему и нижнему краям изображения.

Эти атрибуты, представленные Netscape, были приняты консорциумом W3C (World Wide Web Consortium) в 1996 году для спецификации HTML 3.2. Спецификация HTML 3.2 также позволяет веб-дизайнерам использовать таблицы и апплеты.

При желании вы можете даже установить горизонтальные и вертикальные буферные пространства, используя измерения в пикселях. Например, код разметки для 50-пиксельного буфера выглядит следующим образом:

Проблема с HSPACE заключается в том, что он вставляет буфер с обеих сторон изображения, поэтому, если вы хотите, чтобы изображение было на одном уровне с полями, вам не повезло.

Дополнительная апелляция

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

html — текст слева и изображение справа 

  HTML, тело, div, диапазон, апплет, объект, iframe,
h2, h3, h4, h5, h5, h6, p, цитата, pre,
a, abbr, аббревиатура, адрес, большой, цитировать, код,
del, dfn, em, img, ins, kbd, q, s, samp,
маленький, удар, сильный, sub, sup, tt, var,
б, ю, я, центр,
dl, dt, dd, ol, ul, li,
набор полей, форма, метка, легенда,
таблица, подпись, tbody, tfoot, thead, tr, th, td,
статья, в сторону, холст, детали, вставка,
рисунок, figcaption, нижний колонтитул, заголовок, hgroup,
меню, навигация, вывод, рубин, раздел, сводка,
time, mark, audio, video {
маржа: 0;
отступ: 0;
граница: 0;
размер шрифта: 100%;
шрифт: наследовать;
вертикальное выравнивание: базовая линия;
}
/ * Сброс отображаемой роли HTML5 для старых браузеров * /
article, aside, details, figcaption, figure,
нижний колонтитул, заголовок, hgroup, меню, навигация, раздел {
дисплей: блок;
}
тело {
высота строки: 1;
}
ol, ul {
стиль списка: нет;
}
blockquote, q {
цитаты: нет;
}
цитата: до, цитата: после,
q: до, q: после {
содержание: '';
содержание: нет;
}
Таблица {
граница-коллапс: коллапс;
граница-интервал: 0;
}

ул.topnav {
тип-стиль-список: нет;
/ * позиция: фиксированная; * /
переполнение: скрыто;
маржа: 0;
отступ: 0 0 0 400 пикселей;
цвет фона: # 110E0C;
   / * ширина: 100%;
   верх: 0; * /
}

ul.topnav li {
плыть налево;
}

ul.topnav li a {
дисплей: блок;
цвет белый;
выравнивание текста: центр;
текстовое оформление: нет;
отступ: 14px 30px;
текст-преобразование: прописные буквы;
/ * цвет фона: # 3F4345; * /
}

ул.topnav li a: hover {
цвет фона: # C8D0D7;
цвет: # D8610C;
нижняя граница: сплошной 1px # D8610C;
}

ul.topnav li a.active {
цвет фона: # C8D0D7;
цвет: # D8610C;
нижняя граница: сплошной 1px # D8610C;
}


header {
ширина: 100%;
отступ: 2 пикселя;
черный цвет;
цвет фона: # C8D0D7;
выравнивание текста: центр;
переполнение: скрыто;
}

header img {

высота: 150 пикселей;
ширина: 150 пикселей;
маржа слева: 900 пикселей;
плыть налево;

}
header p {
отступ: 40 пикселей;
}

раздел {
цвет фона: # 333333;
высота: 500 пикселей;
}

section img {
граница: сплошной белый 1px;
высота: 400 пикселей;
ширина: 500 пикселей;
}

section h4 {
цвет белый;
}

section p {
цвет белый;
высота: 170 пикселей;
ширина: 600 пикселей;
отступ: 0;
маржа: 0;
высота строки: 20 пикселей;
вертикальное выравнивание: сверху;
}

.основная тема {
граница: 2 пикселя сплошного зеленого цвета;
ширина: 1541 пикс;
маржа: 0 авто;
ясно: оба;
}

.left-text {
вертикальное выравнивание: по центру;
  плыть налево;
}

.right-picture {

}

.right-picture> img {
дисплей: блок;
}

.Чисто{
ясно: оба;
}  
  <раздел>




 
 Поклонники Дэдпула петиция "SNL" для супергероя в качестве хозяина 
 


Поклонники Дэдпула хотят, чтобы его супергерой проводил субботнюю ночь в прямом эфире - то есть Дэдпул, а не Райан Рейнольдс.Поклонники Merc With A Mouth, которые привели фильм Marvel к историческому дебюту в прокате, запустили петицию Change.org, призывающую антигероя провести предстоящий эпизод скетч-шоу NBC. «Мы все уже видели трейлеры, обложки журналов, вирусные видео и рекламные щиты, так что же остается делать Дэдпулу (Райан Рейнольдс)?» - спрашивает создатель Эндрю Стедж в петиции, которая адресована SNL, создателю Лорну Майклсу, родителю.

css — как поместить текст справа от изображения в html

css — как поместить текст справа от изображения в html — qaru

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

Спросил

Просмотрено 10к раз

Я пытаюсь создать отдельные разделы в теле, которые отображали бы в них такую ​​информацию

с использованием float: left; не помогает, только портит макет страницы.

вот мой html …

вот мой css …

  #a, #g {
    цвет фона: # 6d6d6d;
    цвет: # bdc3c7;
    стиль списка: нет;
}

#pic {
    маржа: + 5% 0 0;
    граница: сплошной черный цвет 3px;
}

#wrapper {
максимальная ширина: 1200 пикселей;
маржа: 0 авто;
заполнение: 0,5%;
стиль списка: нет;
}
Кезия

52655 серебряных знаков2424 бронзовых знака

задан 29 май ’16 в 5:55

ЛегендаОфКасс

12111 золотой знак33 серебряных знака77 бронзовых знаков

1

сменить на.потому что ID нужно использовать 1 раз на странице ..

, затем напишите в css:

  .pic {
плыть налево;
}

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

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