Два блока рядом друг с другом CSS

Два блока рядом друг с другом CSS

Тематические порталы

Портал CSS • Портал Веб-разработчиков

При разработке страниц сайта нередко возникает задача разместить несколько колонок с различным содержимым рядом друг с другом. Однако по умолчанию элементы <div> располагаются последовательно друг за другом. Вопросы по теме статьи или любые другие можно оставить на странице обсуждения.

Создание блоков в HTML

Для начала нам нужно создать в HTML два блока <div> на нашей странице:

<div class="container">
  <div id="block1">Текст</div>
  <div id="block2">Текст</div>
</div>

Оформление блоков DIV рядом друг с другом по горизонтали

Чтобы блоки расположить рядом друг с другом в одну линию необходимо прописать в CSS двум элементам следующие параметры:

#block1 {
float: left;
display: block;
width: 300px;
border: 1px solid gray;
margin: 2px;
padding: 4px;
}

#block2 {
float: left;
display: block;
width: 300px;
border: 1px solid gray;
margin: 2px;
padding: 4px;
}

На выходе получим результат, как показано на изображении справа.

• float - можно придать значения "left" и "right", фактический означает к какой стороне прикрепить блок, можно например первый блок разместить слева, второй справа и они хорошо впишутся.
• display: block; - выводит div блоком.

Дополнительные настройки

Остальные параметры носят декоративный характер:

• width - задаём размер блокам
• border - настраиваем границу блоков
• margin - внешние отступы, чтобы блоки не прилипали друг к другу

Дополнительные опции решения задачи

• Flexbox: Вместо использования float, можно воспользоваться flexbox, что делает управление распределением элементов более гибким:

.container {
  display: flex;
}

#block1, #block2 {
  flex: 1;
  margin: 2px;
  border: 1px solid gray;
  padding: 10px;
  background: lightgray;
}

• Grid: Также, можно использовать CSS Grid для более сложных макетов:

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 4px;
}

#block1, #block2 {
  border: 1px solid blue;
}

Эти методы предоставляют более современные и гибкие подходы к вёрстке в сравнении с использованием float. Обновление вашей статьи с этой информацией может быть полезным для читателей, которые ищут современные методы верстки.

Результат

Потестировать код на отдельной странице

Примечание

Если же возникли трудности с вёрсткой на CSS или есть вопросы по данной статье, то задавайте их в специально созданной теме про CSS на нашем форуме.

См. также

• CSS: display: flex