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

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

Для того чтобы расположить рядом для элемента, например , которые по умолчанию блочные элементы, а значит занимают всю доступную ширину экрана, достаточно изменить тип отображения ( display ) на значение inline-block, и элементы встанут в ряд. Рассмотрим пример. Исходный HTML имеет вид:

  class="block">Первый  class="block">Второй  

.block  display: inline-block; border: 1px solid blue; margin: 2px; > 

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

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

  class="wrapper">  class="block">Первый  class="block">Второй   

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

Как разместить блоки в ряд 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; > 

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

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

.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 золотых знаков 33 33 серебряных знака 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; ссылка

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

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

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

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

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

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

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

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

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