Как расположить два div рядом в одной строке?

@TheSa1ts1 · Регистрация: 21.10.2021

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

Здраствуйте , столкнулся с проблемой , нужно два div расположить рядом и на одном уровне
Вот код html

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
<div align="center">
    <form  style="border:1px #FFFFFF solid; width:230px; padding: 2px 0px 20px 10px;" action="new.php" method="post">
        <p> <font size="5" color="white">Додати товар</font></p>
        <p> <font size="5" color="white">ID товара: </font></p>
        <input name="id">
        <p> <font size="5" color="white"> Название:</p>
        <input name="name">
        <p>Цена:</p>
        <input name="price">
        <p>Фото</p>
        <input type="file" name="photo" multiple accept="image/*">
        <p><input type="date" id="date" name="date"/></p>
        <input type="submit" value="Добавить!">
    </form>
</div>
<div align="center" >
    <form style="border:1px #FFFFFF solid; width:230px; padding: 2px 0px 20px 10px;" action="new.php" method="post">
        <p> <font size="5" color="white">Редактировать товар</font></p>
        <p> <font size="5" color="white">ID товара: </font></p>
        <input name="id">
        <p> <font size="5" color="white"> Название:</p>
        <input name="name">
        <p>Цена:</p>
        <input name="price">
        <p>Фото</p>
        <input type="file" name="photo" multiple accept="image/*">
        <p><input type="date" id="date" name="date"/></p>
        <input type="submit" value="Добавить!">
    </form>
</div>

@Gotcha · 10.01.2023, 21:45

HTML5
1
Обернуть всё хозяйство в <div style="display:flex"></div>

@TheSa1ts1 · 10.01.2023, 21:51 **[ТС]**

У меня весь div росположился слева , и как выровять его?

@Gotcha · 10.01.2023, 21:54

HTML5
1
<div style="display:flex; justify-content: center"></div>

Варианты justify-content: center, space-around, space-beetwen

@ASProgerHack · 10.01.2023, 21:55

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

У меня весь div росположился слева , и как выровять его?

CSS
1
2
3
4
display:flex;
flex-direction:row;
justify-content:center;
align-items:center;

@TheSa1ts1 · 10.01.2023, 22:01 **[ТС]**

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
<div style="display: flex;flex-direction: row;justify-content: center;align-items: center;">
    <div>
        <form  style="border:1px #FFFFFF solid; width:230px; padding: 2px 0px 20px 10px;" action="new.php" method="post">
            <p> <font size="5" color="white">Добавить</font></p>
            <p> <font size="5" color="white">ID товара: </font></p>
            <input name="id">
            <p> <font size="5" color="white"> Название:</p>
            <input name="name">
            <p>Цена:</p>
            <input name="price">
            <p>Фото</p>
            <input type="file" name="photo" multiple accept="image/*">
            <p><input type="date" id="date" name="date"/></p>
            <input type="submit" value="Добавить!">
        </form>
    </div>
    <div >
        <form style="border:1px #FFFFFF solid; width:230px; padding: 2px 0px 20px 10px;" action="change.php" method="post">
            <p> <font size="5" color="white">Изменить</font></p>
            <p> <font size="5" color="white">ID товара: </font></p>
            <input name="id">
            <p> <font size="5" color="white"> Название:</p>
            <input name="name">
            <p>Цена:</p>
            <input name="price">
            <p>Фото</p>
            <input type="file" name="photo" multiple accept="image/*">
            <p><input type="date" id="date" name="date"/></p>
            <input type="submit" value="Добавить    !">
        </form>
    </div>
</div>

Выравнивается только первый div

@Gotcha · 10.01.2023, 22:15

flex-direction: row; - лишнее. Потому что оно и так, по умолчанию.

KingdaKa · 11.01.2023, 06:59

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

Потому что оно и так, по умолчанию.

Нет ничего страшного в том, чтобы прописывать то, что якобы по умолчанию:

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

Новые блоги и статьи Все статьи Все блоги /
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .

@TheSa1ts1 1 / 1 / 0 Регистрация: 21.10.2021 Сообщений: 73
	10.01.2023, 21:51 [ТС]
	У меня весь div росположился слева , и как выровять его? Миниатюры 0

@Gotcha 30 / 26 / 7 Регистрация: 13.07.2013 Сообщений: 116
	10.01.2023, 22:15
	flex-direction: row; - лишнее. Потому что оно и так, по умолчанию. 1