Поставить два блока на одном уровне
Хотя этот блок должен следовать за лого. Помогите пожалуйста разобраться! Понимаю что туплю, и это детсадовский вопрос, но я уже всё перепробовал. Подозреваю что я просто напросто что то не так делаю.
1 2 3 4 5 6 7
body> div id="page_align"> div id="header"> div id="logo">a href="index.html">img src="img/logo.png" width="100%" height="70px" alt="logo">/a>/div> div id="button">/div> /div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52
*{ margin: 0; padding: 0; outline: none; } body { background: url("../img/bg.png") #ffffff; background-repeat: no-repeat; background-size: 100%; } a{ text-decoration: none; } #page_align{ margin: 0 auto; background: #fff; } #header{ width: 100%; height: 70px; border-bottom: solid 3px #fbcd2c; background: #000; opacity: 0.95; clear: both; position: fixed; top: 0; left: 0; box-shadow: 3px 3px grey; } #logo{ width: 20%; height: 70px; background: #000; } #button{ width: 20%; height: 70px; margin-left:20%; background: #000; } #header:not(:hover), #button:not(:hover), #logo:not(:hover){ opacity: 0.75; }
Как сделать, чтобы в css блоки были на одном уровне(линии)?
Но почему-то центральный блок расположен выше, чем два крайних:
Когда увеличиваю длину блоков до 100%, то соответственно появляется полоса прокрутки:
Как это исправить?
- Вопрос задан более трёх лет назад
- 14946 просмотров
Два блока рядом друг с другом 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-фреймворки
Просим обратить внимание: техническая поддержка 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. Настройте ширину блоков в ряду и отображение на мобильных устройствах