Отключен JavaScript

У вас отключен JavaScript. Некоторые возможности системы не будут работать. Пожалуйста, включите JavaScript для получения доступа ко всем функциям.

Как расположить два блока рядом css

Автор темы Алексей web , 14 июл 2025 16:59

Авторизуйтесь для ответа в теме

Сообщений в теме: 2

#1

Алексей web

Дизайнер. Teams - aleksejus.belovas

Киберсанты
6 671 сообщений

Пол:Мужчина

Отправлено 14 Июль 2025 - 16:59

Как расположить два блока рядом в css ?

Как расположить два блока в одну строку в CSS ?

Пишу потому что это важно. Сам долго мучился пробывая разные решения.

Всё оказалось достаточно просто. Нашёл на просторах интернета. Делюсь с вами.

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

Коды HTML и CSS

<body>
  <div class="wrapper">
    <div class="block">Первый</div>
    <div class="block">Второй</div>
  </div>
</body>

Стили CSS:

.wrapper {
  display: flex;
}
.block {
  display: inline-block;
  border: 1px solid blue;
  margin: 2px;
}

1

Наверх

#2

Алексей web

Дизайнер. Teams - aleksejus.belovas

Киберсанты
6 671 сообщений

Пол:Мужчина

Отправлено 15 Июль 2025 - 17:05

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

Нашёл другой способ на просторах интернета. Это свойство display:inline-block

Код HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="main2.css">
    <title>Document</title>
</head>
<body>
    <div class="block" style="background:#faa">Первый блок</div> 
    <div class="block" style="background:#ffa">Второй блок</div>
    <div class="block" style="background:#aff">Третий блок</div>
    <div class="block" style="background:#aff">Четвертый блок</div>

   <p> Ещё один способ разместить элементы в ряд - display:inline-block. 
    Несколько блоков подряд с таким свойством будут размещены в одну линию.
     Также в линию с блоками добавляется и текст:</p>
</body>
</html>

Стили CSS

*{
    box-sizing:border-box;
    margin: 0;
    padding: 0;
}
.block{
    display: inline-block;
    padding: 15px;
    margin: 5px;
}

А вот так выглядит данная страница

2025-07-15_20-06-06.png 55,71К 2 Количество загрузок:

0

Наверх

#3

Алексей web

Дизайнер. Teams - aleksejus.belovas

Киберсанты
6 671 сообщений

Пол:Мужчина

Отправлено 31 Июль 2025 - 19:34

Узнал что для этого можно использовать CSS Grid сетку. Крутая штука. Выглядит как таблица но гораздо гораздо круче !

Видео обучение по CSS Grid я выкладывал на форуме.

0

Наверх

Обратно в Создание и верстка сайтов

Количество пользователей, читающих эту тему: 1

0 пользователей, 1 гостей, 0 скрытых пользователей

Как расположить два блока рядом css

Количество пользователей, читающих эту тему: 1

Войти