Доверьте продвижение нам

Lion Digital Agency

интернет-маркетинг

теги:

Категории

Рубрики

Услуги SEO копирайтера под ключ. Пишем качественные тексты.

от 950 

Настройка и сопровождение рекламного кабинета Яндекс Директ.

от 14000 

Данный набор подходит всем, кто хочет уверенно продавать товары и услуги в интернете. Стоимость набора варьируется в зависимости от конкуренции рынка. Разработка сайта компании/каталог/магазин + Яндекс Директ / ВК реклама + СЕО продвижение.

от 119000 

Как сделать блоки в линию css

Чтобы расположить блоки в линию, можно использовать свойство display с значением inline-block или flex.

  1. Используя свойство display с значение inline-block:
.container {
  font-size:0; /*чтобы убрать пробелы между блоками*/
}

.item {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: red;
  font-size: 16px;
}

Здесь, для каждого блока устанавливается свойство display:inline-block, которое указывает браузеру вести себя так, будто блок это строчный элемент.

  1. Используя свойство display flex:
.container {
  display: flex;
}

.item {
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: blue;
}

Здесь контейнеру устанавливается свойство display: flex, которое делает его контейнером «гибкого» расположения. Это означает, что любые дочерние элементы автоматически выравниваются другим способом. Элементы в контейнере будут расположены в строчку друг за другом.

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

Поделиться:

Комментарии

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Задать вопрос

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.

Меню

Оставить заявку

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.