Как сделать, чтобы в css блоки были на одном уровне(линии)?
Но почему-то центральный блок расположен выше, чем два крайних: 
Когда увеличиваю длину блоков до 100%, то соответственно появляется полоса прокрутки:
Как это исправить?
- Вопрос задан более трёх лет назад
- 14933 просмотра
Как сделать 2 блока на одной строчке и расположить их на ней по разные стороны, т.е. одни слева, другой справа
Есть 2 блока в одном. Они должны быть: 1) Располагаться в одной строчке 2) Быть по разные стороны
Отслеживать
задан 20 фев 2017 в 18:05
93 1 1 золотой знак 1 1 серебряный знак 6 6 бронзовых знаков
Игрушка для освоения flex. Я таких несколько видел, полезно пройти какую-нибудь одну)
20 фев 2017 в 20:00
4 ответа 4
Сортировка: Сброс на вариант по умолчанию
.container < display: flex; justify-content: space-between; background-color: gray; padding: 1em; box-sizing: border-box; >.container div
Отслеживать
ответ дан 20 фев 2017 в 18:16
Andrei Fedorov Andrei Fedorov
5,791 1 1 золотой знак 9 9 серебряных знаков 31 31 бронзовый знак
Задать float-ы для дочерних блоков. И clear для родителя.
div1 < float: left; >div2 < float: right; >main-div:after
Отслеживать
ответ дан 20 фев 2017 в 18:13
51 1 1 бронзовый знак
.container < width: 100%; >.container div < width: 50px; height: 50px; background-color: green; >.container div:nth-child(1) < float:left; >.container div:nth-child(2)
Отслеживать
ответ дан 20 фев 2017 в 18:51
9,126 2 2 золотых знака 16 16 серебряных знаков 32 32 бронзовых знака
.container < width: 100%; display: flex; flex-direction: row; justify-content: space-between; >.container div
Отслеживать
ответ дан 21 фев 2017 в 9:50
183 8 8 бронзовых знаков
- html
- css
- html5
- css3
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Поставить два блока на одном уровне
Хотя этот блок должен следовать за лого. Помогите пожалуйста разобраться! Понимаю что туплю, и это детсадовский вопрос, но я уже всё перепробовал. Подозреваю что я просто напросто что то не так делаю.
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; }
Способы изменения блока
Блоки — это универсальные, повторно используемые компоненты страницы. Одни и те же блоки используются в разных проектах. Чтобы проекты не были одинаковыми, блоки можно изменять различными способами:
Все способы изменения блока не требуют:
- копировать код блока для внесения изменений;
- изменять исходную реализацию блока;
- создавать новый блок на основе существующего.
Как выбрать способ изменения блока
- Используйте модификатор, чтобы изменить один конкретный экземпляр блока. Установка и снятие модификатора должны влиять только на изменяемый блок и не иметь отношения к окружающим блокам.
- Используйте микс:
- чтобы позиционировать один блок в составе другого блока;
- чтобы одинаково стилизовать несколько разных блоков на странице вместо применения групповых селекторов.
Изменение блока модификатором
Изменение блока производится установкой/снятием модификатора, код которого описывает изменения. Блоку можно добавлять одновременно неограниченное количество модификаторов.
Модификатор может задавать блоку:
Рассмотрим изменение блока с помощью модификатора на примере блока popup .
div class="popup">. div>Изменение внешнего вида блока
Модификатор theme в значении sun задает желтый фон всплывающему окну.
div class="popup popup_theme_sun">. div>Изменение поведения блока
Модификатор direction отвечает за направление открытия всплывающего окна.
Например, модификатор direction в значении right открывает всплывающее окно вправо.
div class="popup popup_direction_right">. div>Изменение структуры блока
Модификатор has-tail в значении true добавляет блоку popup новый элемент — «хвостик». Также модификатор добавляет отступы блоку, освобождая место для хвостика.
div class="popup popup_has-tail">. div>Изменение состояния блока
Модификатор disabled переводит блок button , открывающий всплывающее окно, в состояние «отключен», то есть отключает возможность показывать окно.
div class="button button_disabled">. div>Добавление нескольких модификаторов
Блоку можно добавлять неограниченное количество модификаторов. Например:
- theme в значении sun ;
- has-tail в значении true .
div class="popup popup_theme_sun popup_has-tail">. div>Всплывающее окно откроется вниз и будет иметь желтый фон и «хвостик»:
Изменение блока миксом
Изменение блока производится при помощи размещения дополнительных БЭМ-сущностей на одном DOM-узле с блоком. Миксы позволяют совмещать поведение и стили нескольких сущностей без дублирования кода.
Позиционирование одного блока в составе другого
В БЭМ-методологии позиционирование блока на странице задается через родительский блок. Такой подход обеспечивает независимость блоков и возможность их повторного использования.
В примере рассмотрен блок header (шапки) из подключенной библиотеки. По умолчанию блок header ничего не знает о расположении вложенных в него блоков. Чтобы добавить в шапку блоки logo , search и user , необходимо определить отступы для каждого вложенного блока:
Шапка и вложенные в нее блоки logo , search и user должны остаться независимыми. Для этого позиционирование вложенных блоков задается через элементы блока header , которые примиксовываются к блокам.
header class="header"> div class="logo header__logo">. div> div class="search header__search">. div> div class="user header__user">. div> header>
Стили вложенных блоков logo , search и user не изменились и по-прежнему не содержат отступы. Блоки остались независимыми и могут использоваться повторно в любом месте.
Стилизация групп блоков
Миксы используются, чтобы единообразно стилизовать набор разных HTML-элементов на странице.
В примере тексту внутри блоков article и copyright необходимо задать один и тот же цвет и шрифт. Для этого нужно примиксовать блок text , стили которого определяют цвет и шрифт текста, к блокам article и copyright .
article class="article text">. article> footer class="footer"> div class="copyright text">. div> footer>
.text < font-family: Arial, sans-serif; font-size: 14px; color: #000; >
Изменение блока уровнем переопределения
Изменение блока производится при помощи объединения свойств блока с разных уровней переопределения. Блоки можно доопределять и переопределять. Изменения блока описываются на отдельном уровне и подключаются при сборке.
Пример
Универсальные блоки из библиотеки должны выглядеть в разных проектах по-разному. Для этого достаточно подключить библиотеку в проект как отдельный уровень и описать изменения блока на другом уровне переопределения.
Исходная реализация блока button в библиотеке:
Чтобы изменить цвет кнопки, необходимо доопределить CSS-правила блока button на уровне проекта ( project.blocks ).
Файловая структура с новыми правилами для кнопки ( button.css ) на уровне project.blocks :
project/ library.blocks/ button/ button.css # исходная CSS-реализация кнопки в библиотеке project.blocks/ button/ button.css # переопределение на уровне проекта
В результате для блока button применятся правила с обоих уровней переопределения:
@import "library.blocks/button/button.css"; /* Исходные CSS-правила с уровня библиотеки */ @import "project.blocks/button/button.css"; /* Особенности с уровня project.blocks */
Новый внешний вид кнопки:
Изменение блока контекстом
Изменение блока производится при помощи размещения одного блока в составе другого. Правила родительского блока применяются каскадом к вложенным блокам.
Важно Изменять внешний вид и поведение блока контекстом следует только в том случае, если невозможно использовать микс. Изменения с помощью контекста ограничивают независимость блоков.
Самый распространенный случай использования контекста для стилизации блока — реализация блоков для комментариев в блогах или форумах любой CMS-системы.
Например, можно заранее определить правила для основных тегов, которые может применить пользователь:
.comments p < font-family: Arial, sans-serif; text-align: center; >