Разместить текст в 2 строки по разным сторонам блока

@Svetlana_123 · Регистрация: 22.05.2015

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

Добрый день, подскажите, как можно реализовать такой вариант:
есть предложение
<div>
<p>"Студия маникюра делаем красиво"</p>
</div>

нужно на первой строчке оставить Студия маникюра по левому краю дива, а Делаем красиво на второй строке по правому краю дива, причем слово Делаем должно начинаться под словом Красиво.
Причем надо еще учесть как-то див с меню

Разместить текст в 2 строки по разным сторонам блока

@Fedor92 · 30.11.2015, 20:08

Svetlana_123, типа так?

HTML5
1
2
3
4
5
6
7
8
9
10
11
<div style="float:left; width:150px">
    <h4 style="text-align:left">Студия маникюра</h4>
    <h4 style="text-align:right">Делаем красиво</h4>
</div>
<div style="margin-left:40px">
    <ul style="list-style:none">
        <li style="display:inline-block; margin-left:20px">Главная</li>
        <li style="display:inline-block; margin-left:20px">О компании</li>
        <li style="display:inline-block; margin-left:20px">Новости</li>
    </ul>
</div>

Дополнительный стиль:

CSS
1
*{padding:0; margin:0}

@Svetlana_123 · 30.11.2015, 20:15 **[ТС]**

похоже, только мне меню надо дивами сверстать и оно не на одной линии с Делаем красиво идет, а чуть выше

@Fedor92 · 30.11.2015, 20:23

Сообщение от Svetlana_123

похоже, только мне меню надо дивами сверстать и оно не на одной линии с Делаем красиво идет, а чуть выше

В чём проблема?

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Language" content="ru">  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Menu</title>
<style>
*{padding:0; margin:0}
</style>
</head>
<body>
<div style="float:left; width:150px">
    <h4 style="text-align:left">Студия маникюра</h4>
    <h4 style="text-align:right">Делаем красиво</h4>
</div>
<div style="float:left; margin-left:40px">
        <div style="display:inline-block; margin-left:20px">Главная</div>
        <div style="display:inline-block; margin-left:20px">О компании</div>
        <div style="display:inline-block; margin-left:20px">Новости</div>
</div>
</body>
</html>

@Svetlana_123 · 30.11.2015, 20:40 **[ТС]**

блок меню начинается над словом Красиво, как на картинке, это нужно для меню как-то через position relative делать?

@Fedor92 · 30.11.2015, 20:55

Svetlana_123, можно просто padding-top для первого тега h4 добавить и всё...

@Svetlana_123 · 30.11.2015, 21:01 **[ТС]**

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

@Fedor92 · 30.11.2015, 21:18

Svetlana_123, опять не так?

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Language" content="ru">  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Menu</title>
<style>
*{padding:0; margin:0}
</style>
</head>
<body>
<div style="float:left; width:150px">
    <h4 style="text-align:left; padding-top:10px">Студия маникюра</h4>
    <h4 style="text-align:right">Делаем красиво</h4>
</div>
<div style="float:left; margin-left:-30px">
        <div style="display:inline-block; margin-left:20px">Главная</div>
        <div style="display:inline-block; margin-left:20px">О компании</div>
        <div style="display:inline-block; margin-left:20px">Новости</div>
</div>
</body>
</html>

@Svetlana_123 · 30.11.2015, 21:49 **[ТС]**

вроде так, спасибо большое, попробую перенести в свою верстку

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Svetlana_123 0 / 0 / 0 Регистрация: 22.05.2015 Сообщений: 120

	Разместить текст в 2 строки по разным сторонам блока 30.11.2015, 20:00. Показов 4255. Ответов 8 Метки нет (Все метки) Добрый день, подскажите, как можно реализовать такой вариант: есть предложение <div> <p>"Студия маникюра делаем красиво"</p> </div> нужно на первой строчке оставить Студия маникюра по левому краю дива, а Делаем красиво на второй строке по правому краю дива, причем слово Делаем должно начинаться под словом Красиво. Причем надо еще учесть как-то див с меню 0

@Svetlana_123 0 / 0 / 0 Регистрация: 22.05.2015 Сообщений: 120
	30.11.2015, 20:15 [ТС]
	похоже, только мне меню надо дивами сверстать и оно не на одной линии с Делаем красиво идет, а чуть выше 0

@Svetlana_123 0 / 0 / 0 Регистрация: 22.05.2015 Сообщений: 120
	30.11.2015, 20:40 [ТС]
	блок меню начинается над словом Красиво, как на картинке, это нужно для меню как-то через position relative делать? 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	30.11.2015, 20:55
	Svetlana_123, можно просто padding-top для первого тега h4 добавить и всё... 0

@Svetlana_123 0 / 0 / 0 Регистрация: 22.05.2015 Сообщений: 120
	30.11.2015, 21:01 [ТС]
	блок меню сдвинуть левее отрицательным маржином не получается, позиционирование тоже вроде не помогает 0

@Svetlana_123 0 / 0 / 0 Регистрация: 22.05.2015 Сообщений: 120
	30.11.2015, 21:49 [ТС]
	вроде так, спасибо большое, попробую перенести в свою верстку 0