Как разместить блоки в один ряд?
У меня должны быть три блока, которые располагаются в линию. Для этого я каждому элементу задаю 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 обнулены.
- Вопрос задан более трёх лет назад
- 497 просмотров
1 комментарий
Простой 1 комментарий
Как разместить блоки в ряд 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; > Просим обратить внимание: техническая поддержка Tilda Publishing не осуществляет поддержку связанную с работой кода
1) Нужно создать под каждый блок отдельную страницу и настроить его. Таких блоков по горизонтали может быть от двух до четырех. Так-же, добавляем код#1 на страницы с блоками.
2) Переходим на основную страницу и добавляем код#2. В нем находится два элемента iframe. Если нам нужно больше блоков по горизонтали, продублируйте строку кода с элементом iframe и измените в ней номер:
4) Добавляем код#4 и в нем указываем высоту блоков:
.halfblock <
height: 100vh;
>
Можно указать в пикселях 500px или в vh (100vh это 100% высоты экрана).
Важно: в iframe страница попадает полностью, поэтому, если у вас нет годовой подписки в блоках не на всю высоту экрана будет отображаться лейбл вот так. Проблему можно решить, например, добавлением большого отступа на 1000px (блок DV05).
И указываем ширину каждого блока, копируя этот код:
.halfblock1 <
flex: 400px 0 0;
>
flex: 1 0 0; — остаток. Если у нас два блока и у одного блока поставить 400 пикселей, а у второго 1 0 0, тогда второй блок будет занимать (100% ширины экрана — 400 пикселей)
flex: 50% 0 0; — половина ширины экрана
flex: 400px 0 0; — 400 пикселей
5) Если нужно задать другое поведение блоков при определенной ширине экрана, добавляем код 5
Можно добавить display: none и блок не будет отображаться:
.halfblock1 <
display: none;
>
Или можно добавить код#6, чтобы на телефонах блоки перестраивались в столбец.
Если на странице нужно еще в другом месте поставить несколько таких блоков, тогда нужно изменить класс элементов, например с halfblock1, на halfblock2-1.
Модификация дает возможность разместить по горизонтали на одном экране от 2 до 4 разных блока.
Как работает модификация:
1. Создайте отдельные страницы под каждый блок из ряда и добавьте код#1
2. Добавьте на основную страницу код#2 и код#3 — они отвечают за отображение блоков из отдельных страниц в ряд. Блоки будут отображаться в iframe.
3. Настройте ширину блоков в ряду и отображение на мобильных устройствах
Размещение элементов в две строки с помощью Flexbox
Часто веб-разработчики сталкиваются с задачей расположить элементы на странице так, чтобы они динамически изменяли свой размер и подстраивались под размер окна браузера. Рассмотрим, как это можно сделать с помощью Flexbox, укладывая элементы в две строки по четыре в каждой.
В качестве примера возьмем ситуацию, когда на странице есть 8 блоков, которые необходимо расположить в две строки. Все блоки находятся в общем родительском контейнере.
Пример кода
1 2 3 4 5 6 7 8 Стилизация с помощью Flexbox
Чтобы расположить элементы как нужно, можно использовать CSS Flexbox. Сначала задаем родительскому контейнеру свойство display: flex; , что делает его flex-контейнером. Затем, чтобы элементы могли переноситься на новую строку, добавляем свойство flex-wrap: wrap; .
.container
Теперь, чтобы уложить ровно 4 элемента в одну строку, каждому элементу задаем свойство flex-basis: 25%; . Это свойство задает начальный размер flex-элемента перед распределением свободного пространства.
.item
Так восемь элементов располагаются в две строки по четыре в каждой, динамически подстраиваясь под размер окна браузера.