Абзацы и картинка располагаются не разных уровнях по горизонтали, а не на одном

@Справлюсь · Регистрация: 24.07.2014

Студворк — интернет-сервис помощи студентам

Только недавно начал изучать html/css. Решил поиграться с расположением элементов...

В index.html задал <main>:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
...
        <main>
            <h1><span class="Amaz">Amazeriffic</span> изменит вашу жизнь!</h1>
            <p>Присоединяйся к нам! Только у нас актуальные знания и гарантированое трудоустройство.</p>
 
            <h2>Почему вам нужен <span class="Amaz">Amazeriffic</span>?</h2>
            <ul>
                <li>Он легко впишется в вашу жизнь</li>
                <li>Он лёгкий</li>
                <li>Он перевернёт ваш мир</li>
            </ul>
 
            <img src="lamp.jpg" alt="Лампочка" class="main_img">
        </main>
...

В css задал следующие правила:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
...
main {
    background-color: white;
    color: rgb(23, 97, 115);
 
    overflow: auto;
}
 
.main_img {
    float: right;
}
 
.Amaz {
    font-style: italic;
}
...

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

@IRIP · 30.01.2020, 14:52

попробуйте картинку в начало перед h1
разместить

@Справлюсь · 30.01.2020, 15:06 **[ТС]**

IRIP, спасибо, всё заработало!

А почему не работало до этого?

Если судить из этого фрагмента:

Сообщение от Сэмми Пьюривал. Основы разработки веб-приложений;

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

- то нет никакой разницы до или после располагается элемент

@NTHing · 30.01.2020, 17:20

Оберните текст в отдельный контейнер со свойством
float: left;

Новые блоги и статьи Все статьи Все блоги /
Отправка уведомления на почту при изменении наименования справочника Maks 24.03.2026 Программная отправка письма электронной почты на примере изменения наименования справочника "Склады" в конфигурации БП3. Перед реализацией необходимо выполнить настройку системной учетной записи. . .	модель ЗдравоСохранения 5. Меньше увольнений- больше дохода! anaschu 24.03.2026 Теперь система здравосохранения уменьшает количество увольнений. 9TO2GP2bpX4 a42b81fb172ffc12ca589c7898261ccb/ https:/ / rutube. ru/ video/ a42b81fb172ffc12ca589c7898261ccb/ Слева синяя линия -. . .	Midnight Chicago Blues kumehtar 24.03.2026 Такой Midnight Chicago Blues, знаешь?. . Когда вечерние улицы становятся ночными, а ты не можешь уснуть. Ты идёшь в любимый старый бар, и бармен наливает тебе виски. Ты смотришь на пролетающие. . .	Контроль уникальности заводского номера - вариант №2 Maks 24.03.2026 В отличие от предыдущего варианта добавлено прерывание циклов, также добавлены новые переменные для сохранения контекста ошибки перед прерыванием цикла: Процедура ПередЗаписью(Отказ, РежимЗаписи,. . .
SDL3 для Desktop (MinGW): Вывод текста со шрифтом TTF с помощью библиотеки SDL3_ttf на Си и C++ 8Observer8 24.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-text-sdl3-c. zip finish-text-sdl3-cpp. zip	Жизнь в неопределённости kumehtar 23.03.2026 Жизнь — это постоянное существование в неопределённости. Например, даже если у тебя есть список дел, невозможно дойти до точки, где всё окончательно завершено и больше ничего не осталось. В принципе,. . .	Модель здравоСохранения: работники работают быстрее после её введения. anaschu 23.03.2026 geJalZw1fLo Корпорация до введения программа здравоохранения имела много невыполненных работниками заданий, после введения программы количество заданий выросло. Но на выплатах по больничным это. . .	Контроль уникальности заводского номера - вариант №1 Maks 23.03.2026 Алгоритм контроля уникальности заводского (или серийного) номера на примере документа выдачи шин для спецтехники с табличной частью в конфигурации КА2. Данные берутся из регистра сведений, по. . .

@IRIP 514 / 146 / 28 Регистрация: 18.04.2015 Сообщений: 1,904 Записей в блоге: 16
	30.01.2020, 14:52
	попробуйте картинку в начало перед h1 разместить 1

@NTHing 1782 / 963 / 388 Регистрация: 26.11.2014 Сообщений: 1,966 Записей в блоге: 1
	30.01.2020, 17:20
	Сообщение было отмечено Справлюсь как решение Решение Оберните текст в отдельный контейнер со свойством float: left; 1

Абзацы и картинка располагаются не разных уровнях по горизонтали, а не на одном

Решение