Как разместить блоки друг под другом css

Как расположить 2 inline-block друг под другом без костылей?

Есть 2 inline-block , их нужно поместить друг под другом. Есть ли способ без костылей и не правя ‘html’ это сделать? з.ы. в изначальном коде в инлайн блоках содержатся динамические элементы, поэтому нельзя применять ширину 100%

.a, .b < display: inline-block; >.a, .b < float: left; >.b

Текст
 Текст

Отслеживать
задан 22 дек 2015 в 10:57
4,488 6 6 золотых знаков 38 38 серебряных знаков 93 93 бронзовых знака
а зачем вы флоутите то, что заинлайнено? О_________________О
22 дек 2015 в 11:01
а разве заставлять inline блоки вести себя не так, как задумано изначально, это уже не костыли?
22 дек 2015 в 11:01

@Алексей Шиманский «а зачем вы флоутите то, что заинлайнено?» есть у меня такая потребность — этого достаточно? » потому что они к тегам прописаны, а не к классам» — поправил, быстро набирал — опечатался

22 дек 2015 в 11:10

@lexxl если уже так разобраться — любое css правило — это костыль, который вмешивается в изначальную структуру html

22 дек 2015 в 11:12

чёт я всё равно не понимаю, этот css с float в вопросе — это у вас в проекте так и изменять нельзя? или зачем он там?

22 дек 2015 в 11:20

2 ответа 2

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

У вас в принципе подход не правильный, вам нужно либо добавить врапперы, либо хотя бы
добавить.

Добавить обертку:

 Текст
 
 Текст

Добавить перенос:

Текст
 
Текст

Либо через псевдоэлементы, но только для display: inline; :

.a, .b < display: inline; white-space:pre; >.b:before

Текст
 Текст

Еще вариант через white-space: pre; для родителя, но тогда будут учитываться все проблемы и переносы в разметке:

.parent < white-space: pre; >.a, .b

Текст
 Текст

Отслеживать
ответ дан 22 дек 2015 в 11:38
5,916 1 1 золотой знак 15 15 серебряных знаков 35 35 бронзовых знаков

Вариант, который вижу я:

Текст
 Текст

Отслеживать
ответ дан 22 дек 2015 в 11:07
Алексей Шиманский Алексей Шиманский
71.2k 12 12 золотых знаков 91 91 серебряный знак 180 180 бронзовых знаков

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

22 дек 2015 в 11:15
@Вася а вот надо упоминать как можно больше информации, чтоб не возникало таких сюрпризов)
22 дек 2015 в 11:16
дополнил описание
22 дек 2015 в 11:17

@Вася Мне кажется вам еще больше инфы надо добавить. Что у вас там добавляется, что вы делаете, для чего это нужно. Что НЕ нужно и т.д. А то так мало что понятно

22 дек 2015 в 11:23
php цикл добавить? а смысл
22 дек 2015 в 13:03

html
css
inline
blocks

Важное на Мете

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как разместить блоки друг под другом?

Имеется 3 блока: sidebar_left, content, sidebar_right — они располагаются в одну строку. Но когда добавляешь еще один sidebar_left, он уходит вправо, а должен падать под первый sidebar_left; Тоже самое и с sidebar_right; Как сделать неограниченное добавление sidebar’ов ?

#main < margin: 0 auto; background: #eaeaea; width: 1000px; height: 900px; >.clear < clear: both; >.header < width: 100%; height: 190px; >.sidebar_left < width: 185px; height: 250px; background: #000000; position: relative; float: left; >#content < width: 630px; height: 600px; float: left; position: relative; background: #ffffff; >#sidebar_right

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

Комментировать

Решения вопроса 1

Satanpit

Как размещать блоки друг за другом (подробнее на скрине)?

Есть контейнер фиксированной высоты (слайдер), в нем находятся блоки разной высоты, как сделать так, что бы эти блоки размещались друг за другом, а если 2 блока влезают в одну строку, то чтоб они располагались друг под другом?

Структура только такая:

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

display

Как поставить несколько элементов в строку? Объясняем, как менять стандартный тип отображения на произвольный. Подробно говорим об основных типах отображения.

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье

Кратко
Пример
Как понять
Как пишется
Подсказки
На практике
1. Алёна Батицкая советует
1. В чём разница между inline и inline-block?
Контрибьюторы:

Обновлено 11 мая 2023

Кратко

Скопировать ссылку «Кратко» Скопировано

По умолчанию почти все элементы в HTML имеют блочный и строчный тип отображения. Но в вёрстке часто бывает, что нам нужно сделать элемент не строчным, а блочным. И наоборот.

Тут на помощь приходит свойство display ✨

Помимо значений block (блочное отображение) и inline (строчное отображение) существует смешанное значение inline — block (строчно-блочное отображение).

Бывают и другие специфичные значения, например, flex , grid , table — cell .

Пример

Скопировать ссылку «Пример» Скопировано

Частая ситуация: на странице нужно показать иконки соцсетей со ссылками на аккаунты.
```
 div class="wrapper"> ul class="social"> li class="social__item twitter"> a href="" class="social__link">a> li> li class="social__item fb"> a href="" class="social__link">a> li> li class="social__item youtube"> a href="" class="social__link">a> li> ul> div>      
```
Обратите внимание, что внутри ссылок ничего не написано. Нам не нужно выводить название соцсети, а нужно вывести иконку с логотипом. Что мы и сделаем при помощи фона.

Выстраиваем пункты списка в ряд, а не друг под другом:
```
 .social__item  display: inline-block;> .social__item  display: inline-block; >      
```
Превращаем ссылки из строчных в блочные элементы. После этого можем задать высоту и ширину:
```
 .social__link  display: block; width: 30px; height: 30px; background-repeat: no-repeat; background-position: center; background-size: contain;> .social__link  display: block; width: 30px; height: 30px; background-repeat: no-repeat; background-position: center; background-size: contain; >      
```
Задаём иконки фоном для каждой отдельной ссылки:
```
 .twitter  background-image: url(twitter-round-blue.png);> .fb  background-image: url(fb-square-blue.png);> .youtube  background-image: url(youtube-red-square.png);> .twitter  background-image: url(twitter-round-blue.png); > .fb  background-image: url(fb-square-blue.png); > .youtube  background-image: url(youtube-red-square.png); >      
```
По умолчанию ссылки — строчные. Это значит, что им нельзя задать размеры ( width и height ) и фоновую картинку.

Пишем display : block , и строка превращается в условный прямоугольник, у которого могут быть и размеры, и фон.

После этого смело меняем размер на нужный нам и фоном выводим иконки каждой из соцсетей.

Помимо этого по ходу решения задачи мы установили свойство display : inline — block для пунктов списка с классом social _ _ item . За счёт этого элементы, которые по умолчанию блочные, приобретают внешние признаки строчных элементов. Вместо того чтобы выстраиваться друг под другом, пункты списка теперь стоят рядом, в строку.

Как понять

Скопировать ссылку «Как понять» Скопировано

Каждый HTML-элемент по умолчанию имеет свой тип отображения. Например, ссылки нужны для оборачивания слов и фраз. Значит, они должны быть строчными, чтобы не разорвать окружающий текст.

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

Как пишется

Скопировать ссылку «Как пишется» Скопировано

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

Значения свойства, которые встречаются в работе чаще всего:
- none — полностью скрывает элемент со страницы, не удаляя его при этом из HTML-разметки.
- block — элемент ведёт себя как блочный.
- inline — block — элемент ведёт себя снаружи как строчный, а внутри как блочный.
- flex — элемент становится флекс-контейнером, ведёт себя как блочный, а вложенные элементы становятся флекс-элементами. Подробнее в Гайде по flexbox.
- grid — элемент становится грид-контейнером. Снаружи грид-контейнер ведёт себя как блок. Дочерние элементы такого контейнера начинают подчиняться правилам грид-раскладки. Подробнее в Гайде по grid.
Остальные значения можно посмотреть в спецификации.

Это свойство можно применить к любому HTML-элементу.

Подсказки

Скопировать ссылку «Подсказки» Скопировано

�� Свойство display нельзя анимировать ��

�� Значение по умолчанию у каждого HTML-элемента своё. Если нет уверенности — загляните в «Инструменты разработчика» в браузере.
- Chrome 57, поддерживается 57
- Edge 79, поддерживается 79
- Firefox 81, поддерживается 81
- Safari 9, поддерживается 9
На практике

Скопировать ссылку «На практике» Скопировано

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

�� Если задаёте display : inline — block , чтобы выстроить несколько блоков в строку, обязательно указывайте для родительского элемента font — size : 0 . Иначе между строчно-блочными элементами будут небольшие отступы, как между словами — пробелы.

�� Многие начинающие разработчики сталкиваются с проблемой при выводе иконок соцсетей фоном для ссылок. Ссылки изначально строчные. Для изменения размера ссылки и для возможности задать ей фон ссылку нужно сделать блочной ( display : block ) или строчно-блочной ( display : inline — block ).

�� Если нужно вывести на страницу данные в виде таблицы, то в HTML-разметке создайте таблицу при помощи соответствующих тегов. Не используйте display : table для визуального преобразования в таблицу тех элементов, которые не имеют никакого отношения к таблице. Помните про семантику! ☝️

Семантикой в вёрстке называют подбор тегов по смыслу элемента. Прошли эпохи вёрстки на таблицах и дивах. Теперь почти для всего есть отдельный тег. Например, для меню есть тег , а для основного контента страницы — .

�� Если нужно плавно показывать элемент или наоборот, прятать его, стоит присмотреться к решениям с использованием visibility и opacity . Или менять стили элемента при помощи JavaScript. Например, можно показывать другой текст по наведению на элемент:
```
    Я — текст простой. Наведи на меня курсор, и я покажу подсказку! Теперь ты читаешь скрытую подсказку! ��   div class="parent"> p class="some-text"> Я — текст простой. Наведи на меня курсор, и я покажу подсказку! span class="note">Теперь ты читаешь скрытую подсказку! ��span> p> div>      
```
```
 .some-text  position: relative;> .note  position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 0; transition: opacity 0.35s;> .some-text:hover .note  opacity: 1;> .some-text  position: relative; > .note  position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 0; transition: opacity 0.35s; > .some-text:hover .note  opacity: 1; >      
```
�� Очень много задач сегодня решает display : flex . С его появлением перестали так часто использоваться значение inline — block или свойство float . Например, частая задача вертикального выравнивания раньше решалась при помощи магических пассов — большого количества кода, — а теперь легко решается одним свойством align — items . Или прижать два блока к разным сторонам родителя раньше можно было при помощи float и заклинания для решения проблемы выпадания. Теперь достаточно написать justify — content : space — between , и два блока будут прижаты к краям родителя ��

На собеседовании

Скопировать ссылку «На собеседовании» Скопировано
Похожие публикации:

Как разместить блоки друг под другом css

Как расположить 2 inline-block друг под другом без костылей?

2 ответа 2

Похожие

Подписаться на ленту

Как разместить блоки друг под другом?

Как размещать блоки друг за другом (подробнее на скрине)?

display

Кратко

Пример

Как понять

Как пишется

Подсказки

На практике

Алёна Батицкая советует

На собеседовании

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