Как расположить элемент как на картинке?

@triatri3 · Регистрация: 16.11.2016

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

Как расположить элемент как на картинке? Я пытался, проблема в том, что кнопка идёт нераздельно с текстом. + каким свойством максимально удобно перенести кнопку в правую часть? text-align: right?

@AlexZaw · 31.07.2018, 14:14

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

ак расположить элемент как на картинке? Я пытался, проблема в том, что кнопка идёт нераздельно с текстом

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

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

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

Что значит максимально удобно? Вы ее на себе понесете? Все зависит от ситуации, когда то может хватить и text-align, когда то может подойти float, когда то flex, а когда то без абсолютного позиционирования не обойтись...

@Fedor92 · 31.07.2018, 14:17

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    
        .wrap{
            position:relative;
            width:60%;
            margin:0 auto;
            padding:1rem;
            border:2px solid #cdcdcd
        }
        
        .wrap p{
            font:14px/1.25 Tahoma;
            padding-bottom:2rem;
            text-align: justify
        }
        
        .wrap button{
            padding:0.5rem;
            color:#fff;
            position:absolute;
            right:1rem;
            bottom:1rem;
            background:red;
            border:2px solid #000
        }
    
    </style>
</head>
<body>
    <div class="wrap">
        <p>
        
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores deleniti similique autem eum nam molestiae et omnis! Quaerat, perferendis, perspiciatis sed ullam adipisci ipsum in aliquam quos itaque voluptate ipsa!</span>
            <span>Fuga, accusamus, inventore, unde vel atque deleniti minus omnis consectetur eveniet iste illo quo impedit autem incidunt iusto quisquam voluptatem nulla consequuntur corporis officia! Voluptatibus libero nam sunt possimus labore?</span>
            <span>Doloribus, ab odit facilis voluptatem sint porro alias numquam rerum voluptate quibusdam eos natus enim repellat perferendis doloremque perspiciatis voluptas ratione amet at consectetur. Dolore, at quam ea doloremque magni.</span>
            <span>Incidunt, laborum, saepe, aspernatur, adipisci aliquam ullam doloribus illum totam vero aliquid cumque iusto doloremque obcaecati alias cupiditate corrupti in sunt quam officiis nobis architecto ipsam ducimus perspiciatis sed modi.</span>
            <span>Itaque, eos exercitationem necessitatibus possimus soluta tempora aspernatur dicta quisquam deleniti blanditiis. Quibusdam, magnam deserunt laudantium commodi architecto veritatis excepturi maxime amet voluptas nihil dolor dicta aliquid reprehenderit alias soluta!</span>
        
        </p>
        
        <button>Отправить</button>
    </div>
</body>
</html>

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	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 была полностью переписана на Си, в. . .

@triatri3 11 / 12 / 8 Регистрация: 16.11.2016 Сообщений: 892

	Как расположить элемент как на картинке? 31.07.2018, 14:00. Показов 1066. Ответов 2 Метки нет (Все метки) Как расположить элемент как на картинке? Я пытался, проблема в том, что кнопка идёт нераздельно с текстом. + каким свойством максимально удобно перенести кнопку в правую часть? text-align: right? Миниатюры 0