Как расположить блоки в один ряд в css
Перейти к содержимому

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

  • автор:

Блоки в одну строку

Ребят, такая проблема. Хочу чтобы лого был на одной строке с меню, я это сделал. Но меню очень низко сидит на странице (т.к. на одном уровне с эмблемой). Как сделать так, чтобы лого осталось на этой же позиции, а блок меню поднялся чуть выше?

.header < color: #22D99F; background-color: #052230; border: 3px solid #6593E1; border-radius: 30px; font-size: 40px; margin-top: 50px; margin-left: 200px; margin-right: 10px; padding-left: 50px; padding-right: 50px; padding-bottom: 10px; padding-top: 10px; text-align: center; width: 1100px; >.news < margin-right: 30px; display: inline-block; font-size: 30px; background-color: #6593E1; border: 5px solid #382C49; border-radius: 30px; color: #D2C2E1; padding-left: 10px; padding-right: 10px; width: 200px; text-align: center; >.news:hover < background-color: #78527E; color: lime; >.hood < display: inline-block; >.lab < margin-left: 50px; margin-top: 50px; width: 200px; height: 250px; background-image: url('http://russia-assault.ru/files/forums_imgs/1506001407.png'); background-position: center; >
  
Новости
Статистика
Турниры
Матчи

Если не совсем поняли суть вопроса — пишите. Спасибо.
Отслеживать
14.5k 6 6 золотых знаков 35 35 серебряных знаков 71 71 бронзовый знак
задан 7 янв 2019 в 23:19
15 1 1 золотой знак 1 1 серебряный знак 4 4 бронзовых знака
Добавьте, пожалуйста, полный код, не вижу в примере класса .lab
7 янв 2019 в 23:34
@meine добавил,извини,что так некрасиво табуляцию произвел,надеюсь поймешь.
8 янв 2019 в 5:24

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Хочу чтобы лого был на одной строке с меню, я это сделал.

Не подумайте, что это оскорбление, но я не увидел картинку и меню на одной строке.

Здесь я привел пример как Вы можете выстроить свой код, а снизу я расскажу в общем о выстраивании элементов в 1 линию/строку.

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

Выровнить элементы в одну строку можно несколькими способами:

  1. display: inline-block; — данное свойство определяет элемент как строчно-блочный, другими словами выстраивает элементы в строку. ВНИМАНИЕ! Если не установить свойство width , блоки примут по умолчанию значение ширины всей страницы и от свойства display не будет ни какого толку. Важно понимать что элементы встанут в одну линию если для них обоих (или более) будет задано свойство display: inline-block при этом между ними не будет других элементов, с отличным от данного, свойством.
.block
  1. float: left/right; — Аналогичное по результату display: inline-block , но отличное по принципам работы свойство float — в переводе с английского означает — обтекание. Если мы изменим наш предыдущий пример, то результат окажется точно таким же, но важное отличие состоит в том что данное свойство достаточно назначить одному элементу, а следующий в независимости от свойств встанет в одну строку с ним. Но это сработает только с заполненными элементами типа

    с текстом внутри, а в данном случае элемент без свойства float встанет в тоже самое место что и предыдущий элемент. Для того что бы его подвинуть необходимо использовать margin-right

.block
  1. display: flex; — c помощью Flexbox можно легко выравнивать элементы по горизонтали и по вертикали, менять направление и порядок отображение элементов, растягивать блоки на всю высоту родителя или прибивать их к нижнему краю. Для начала надо знать, что flex-элементы располагаются по осям. По умолчанию элементы располагаются по горизонтали — вдоль main axis — главной оси. Так же следует иметь в виду, что при использовании Flexbox для внутренних блоков не работают float , clear и vertical-align , а так же свойства, задающие колонки в тексте. И теперь родительскому( .container ) элементу добавляем display: flex; . Внутренние div -ы выстраиваются в ряд (вдоль главной оси) колонками одинаковой высоты, независимо от содержимого.
.container < display: flex; >.block

Главную суть выстраивания элементов я передал, подробнее Вы сможете почитать в интернете. Снизу я приложу ссылки.

Подробнее о свойстве display: flex; Вы можете почитать перейдя по этой ссылке.

Свойство display: inline-block; ссылка

Свойство float: left/right; ссылка

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

Для того, что бы расположить несколько блочных элементов в линию обычно применяется flexbox . Особенно это актуально когда блоки должны располагаться вдоль одной из осей — только горизонтально или только вертикально. Если требуется сетка, где блоки должны размещаться как на шахматной доске, то правильнее применять grid-модель для распределения контента. Рассмотрим пример.

Исходный HTML файл

 class="container"> 123 456 789 1011 1213  

Для начала надо определить (или создать) родительский элемент для всех блочных элементов которые необходимо позиционировать в ряд. В нашем случае это div-элемент с классом container. Затем описать правила, изменить display, и выбрать способ распределения блоков внутри flex-контейнера с помощью justify-content и align-items .

.container  display: flex; /* крайние блоки прижмуться к краям родительского элемента, остальные равномерно займут пространство между ними. */ justify-content: space-between; > 

Как разместить блоки в один ряд?

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

5f6e399ad4af8576721003.png

1. Дальше в первом случае я пишу какой ширины должен быть родитель блоков ( width: 1565px ). После этого я задаю родителю padding’и с правой ли вой стороны в 40px. Результат: моим трем блокам по непонятной причине не хватает места и один из них располагается снизу.

5f6e3a455e9ce585699278.png

Я пытаюсь дальше.
2. Я прописываю ширину больше, чем раньше и все три моих блока располагаются в одну линию, но не по центру, а слева.

Вот мой код
Чем можно объяснить такое поведение inline-block. Как исправить эту проблему? Заранее огромное спасибо.

P.S. Все делается четко по макету:
1) 1 изображение – 519px (всего 3 — 1557рх);
2) Между картинками отступ в 4рх (всего 2 — 8рх);
Итого: 1565рх.
margin, padding обнулены.

  • Вопрос задан более трёх лет назад
  • 524 просмотра

1 комментарий

Простой 1 комментарий

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

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

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

Вопросы по теме статьи или любые другие можно оставить на странице обсуждения.

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

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

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

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

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

#block1  float: left; display: block; width: 300px; border: 1px solid blue; margin: 2px; > #block2  float: left; display: block; width: 300px; border: 1px solid blue; margin: 2px; > 

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

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

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

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

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

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

  • Flexbox: Вместо использования float, можно воспользоваться flexbox, что делает управление распределением элементов более гибким:
.container  display: flex; > #block1, #block2  flex: 1; margin: 2px; border: 1px solid blue; > 
  • 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

  • Размер блока
  • Оформление линий
  • Оформление таблиц
  • Выравнивание блока
  • Два блока рядом
  • Настройка ссылок
  • Настройка фона
  • Настройка шрифта
  • Отступы
  • Оформление картинок
  • Галерея картинок
  • Оформление кнопок
  • Оформление списков
  • Оформление иконок
  • Курсор в CSS
  • Навигационная панель
  • Выпадающее меню
  • Формы в CSS
  • Вёрстка шаблона сайта
  • CSS Flexbox
  • CSS Grid
  • Анимации и переходы CSS
  • Медиа-запросы CSS
  • CSS-препроцессоры
  • CSS-фреймворки

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

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