Урок: блоки в одну строку CSS
Для того, чтобы выстроить блоки в одну строку с помощью CSS необходимо понимать, что выстраиваемые блоки представляют собой не просто какие-то разрозненные блоки, а группу. Понимая это необходимо объединить их. Объединение осуществляется с помощью заключения всех блоков в какой-то другой блок, который будет «родительским» по отношению к этой группе.
Группа блоков внутри родительского блока:
< div >Текст текст текст текст текст текст < / div >
< div >Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст < / div >
< div >Тексттекст текст текст текст текст текст текст текст текст текст текст текст текст < / div >
< div >Тексттекст текст текст < / div >
Пусть будет известно, что будут располагаться блоки в одну строку и их количество будет равно 4-м, зная это можно рассчитать ширину блоков и отступов между ними в относительных величинах — в процентах.
Так как для дочерних блоков 100% ширины — это вся ширина родительского блока. Из этого следует, что для получения максимальной ширины дочернего блока, при расположении блоки в одну строку, надо воспользоваться формулой: 100 / 4 = 25, где 100 — это ширина родительского блока, а 4 — количество дочерних. Получается, что каждый блок должен быть не шире 25%, чтобы расположить блоки на одной строке.
Так как между блоками должно быть расстояние, чтобы они не «слипались», то необходимо рассчитать ширину отступа между блоками.
Количество отступов между блоками меньше количество самих блоков на единицу, то есть в данном случае отступов будет 3.
Если взять отступ равный 2%, то получится, что ширина каждого блока должна быть 23,5%: 4 * 23,5 + 3 * 2 = 100. Получается, что сумма всех ширин, включая отступы, по прежнему составляет 100%, как и должно быть.
Как разместить блоки в один ряд?
У меня должны быть три блока, которые располагаются в линию. Для этого я каждому элементу задаю 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 обнулены.
- Вопрос задан более трёх лет назад
- 489 просмотров
1 комментарий
Простой 1 комментарий
Два блока рядом друг с другом CSS
При формировании той или иной страницы на сайте иногда возникает необходимость создать колонки с тем или иным содержимым, которые находились рядом друг с другом. По умолчанию блоки не располагаются рядом друг с другом, а идут по порядку снизу.
Вопросы по теме статьи или любые другие можно оставить на странице обсуждения.
Создание блоков в HTML
Для начала нам нужно создать в HTML два блока на нашей странице:
div id="block1">Текстdiv> div id="block2">Текст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 — внешние отступы, чтобы блоки не прилипали друг к другу
Примечание
Если же возникли трудности с вёрсткой на CSS или есть вопросы по данной статье, то задавайте их в специально созданной теме про CSS на нашем форуме.
Статьи по теме CSS
- Размер блока
- Оформление линий
- Оформление таблиц
- Выравнивание блока
- Два блока рядом
- Настройка ссылок
- Настройка фона
- Настройка шрифта
- Отступы
- Оформление картинок
- Галерея картинок
- Оформление кнопок
- Оформление списков
- Оформление иконок
- Курсор в CSS
- Навигационная панель
- Выпадающее меню
- Формы в CSS
- Вёрстка шаблона сайта
- CSS Flexbox
- CSS Grid
- Анимации и переходы CSS
- Медиа-запросы CSS
- CSS-препроцессоры
- 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; >