Блоки DIV по горизонтали
Ширина же задана для #main, когда вложенные блоки div достигают предела ширину в 1119px блок спозлает снизу и в левый край.
2 апр 2014 в 2:21
попробуй div
2 апр 2014 в 2:26
и что это даст? у меня количество блоков вложенных не обязательно 3
2 апр 2014 в 2:28
2 апр 2014 в 2:30
4 ответа 4
Сортировка: Сброс на вариант по умолчанию
HTML
CSS
* < margin: 0px; padding: 0px; >html, body < height: 100%; >body < background-color: #ccc; >div < border: 1px solid #fff; margin:10px; text-align: center; >#main < width: 1119px; height: 150px; overflow: hidden; >#main>div Отслеживать
ответ дан 2 апр 2014 в 4:50
Анатолий Синицын Анатолий Синицын
61 3 3 бронзовых знака
Вы плохо прочитали мой вопрос, сейчас это сделано, но это не решает проблему. Добавьте в ваш пример по ссылке — еще 5 блоков и проиндексируйте — увидите, что не поместившиеся блоки съехали в невидимую область слева.
2 апр 2014 в 16:13
не проще ли для всех троих блоков задать ширину и высоту а потом просто добавит ко всем float:left
Отслеживать
27.6k 5 5 золотых знаков 35 35 серебряных знаков 65 65 бронзовых знаков
ответ дан 2 апр 2014 в 12:43
Роман Соколов Роман Соколов
629 3 3 золотых знака 20 20 серебряных знаков 49 49 бронзовых знаков
Очень легко: блокам display: inline-block; родителю white-space: nowrap;. Таким образом мы запрещаем перенос строк.
Отслеживать
ответ дан 30 дек 2017 в 12:13
105 10 10 бронзовых знаков
Решение без переноса:
.main < display: flex; flex-direction: row; flex-wrap: nowrap; >.main__item
Вася Петя Миша Сыр Вася Петя Миша Сыр Вася Петя Миша Сыр Вася Петя Миша Сыр Вася Петя Миша Сыр Решение с переносом:
.main < display: flex; flex-direction: row; flex-wrap: wrap; >.main__item
Вася Петя Миша Сыр Вася Петя Миша Сыр Вася Петя Миша Сыр Вася Петя Миша Сыр Вася Петя Миша Сыр Кроссбраузерность без переноса:
upd: с переносом думаю сами додуматесь? 🙂
.main < display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; >.main__item
Вася Петя Миша Сыр Вася Петя Миша Сыр Вася Петя Миша Сыр Вася Петя Миша Сыр Вася Петя Миша Сыр Отслеживать
ответ дан 26 апр 2018 в 11:37
1,552 4 4 золотых знака 16 16 серебряных знаков 32 32 бронзовых знака
- html
- вёрстка
- css
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
CSS justify-content: как использовать и применять к элементам
CSS свойство justify-content используется для выравнивания содержимого внутри контейнера по главной оси. Это свойство управляет распределением свободного пространства между элементами или их контейнером, когда все элементы в контейнере занимают не всю доступную ширину их контейнера по горизонтали. Свойство justify-content имеет несколько значений:
1. flex-start (по умолчанию) — Элементы распределяются вдоль главной оси, начиная с начала контейнера.
2. flex-end — Элементы распределяются вдоль главной оси, заканчивая в конце контейнера.
3. center — Элементы распределяются вдоль главной оси, выравниваясь по центру контейнера.
4. space-between — Элементы распределяются вдоль главной оси, таким образом, чтобы расстояние между элементами было одинаковым, а расстояние от края контейнера до первого и последнего элементов было равным половине расстояния между элементами.
5. space-around — Элементы распределяются вдоль главной оси, таким образом, чтобы расстояние между элементами и расстояние от края контейнера до первого и последнего элементов были одинаковыми.
Например, вот как мы можем использовать свойство justify-content, чтобы выровнять элементы по центру контейнера:
html Item 1 Item 2 Item 3 css .container < display: flex; justify-content: center; >.item
В этом примере мы используем display:flex; для установления гибкого контейнера, а свойство justify-content:center; выравнивает элементы в контейнере по центру.
Также, мы можем использовать другие значения свойства, чтобы распределить элементы по-разному, как показано в следующих примерах:
css .container < display: flex; justify-content: flex-start; >.container < display: flex; justify-content: flex-end; >.container < display: flex; justify-content: space-between; >.container
Таким образом, свойство justify-content является важным инструментом для работы с гибким контейнером, который позволяет легко выравнивать содержимое внутри контейнера по главной оси.
Работа с сеткой — CSS: Вёрстка на Grid
В уроке, посвящённом терминологии модуля Grid уже демонстрировался блог Hexlet и пример сетки, которую он использует. Вы могли заметить, что помимо непосредственно полос, по которым выстраивается контент, в этой сетке были использованы отступы между полосами. На изображении они были выделены оранжевым цветом.
Зачем же они нужны? Зачастую, весь наш контент внутри ячеек располагается по всей ширине. В этом случае отступы между колонками являются заменой свойства margin, но с одним существенным условием: модуль Grid автоматически проставляет отступы только там, где это необходимо. Это значит, что при разработке нет нужды отменять ненужные margin у первых или последних полос сетки.
Отдельно стоит упомянуть о том, что данные отступы не отрабатывают — они добавятся к ширине полос, внутри которых расположен элемент. Внутри самого элемента никаких отступов не будет.
Перейдём от теории к практике. Возьмём один из примеров, который был в прошлых уроках. В нём представлена типичная схема двухколоночного макета, который часто встречается в разработке. Для удобства работы в данном уроке, помимо определения Grid-областей, укажем ширину каждой колонки в 100 пикселей:
Обратите особое внимание на совместную работу свойств grid-template-areas , grid-template-columns / grid-template-rows . Как видно, они не являются заменой друг друга, а прекрасно работают в связке.
В этом примере представлен макет, состоящий из 6 колонок. Сейчас отступа между сайдбаром и основным контентом не существует. Обычно это плохо отражается на читаемости информации в макете, так как тексты из двух разных элементов начинают слипаться друг с другом.
Для решения задачи создания отступов между Grid-полосами существует 2 свойства: grid-column-gap и grid-row-gap . Как можно догадаться из названия, первое свойство отвечает за отступ между колонками, а второе свойство — за отступ между рядами. В качестве значения свойства выступает любая доступная в CSS единица измерения. Будь то пиксели, проценты или любые другие единицы измерения.
Создадим в нашем двухколоночном макете отступ между колонками в 30 пикселей. Для этого необходимо у контейнера выставить необходимое значение.
Если взглянуть на получившийся макет с помощью Chrome DevTools, то получим следующее:
Обратите внимание на отступы между колонками и на то, что несмотря на них, не появилось никаких отступов внутри элементов. Отступы стали частью наших элементов. А между сайдбаром и основным контентом образовался необходимый отступ в 30 пикселей.
На самом деле свойства grid-column-gap и grid-row-gap потихоньку выводятся из стандарта. В спецификации CSS появляется возможность задавать точно такие же отступы в модуле Flex, чтобы уйти от текущих проблем с отрицательными отступами при создании макетов. По этой причине было принято решение сделать одни правила и для Flex, и для Grid. Новые версии свойств избавились от приставки grid-* и именуются просто column-gap и row-gap .
Для удобства, разработчики CSS Grid Layout добавили сокращённое свойство grid-gap (или просто gap ) для возможности указать отступы между колонками и рядами в одном единственном свойстве. Свойство grid-gap может принимать 2 значения:
- Отступ между рядами.
- Отступ между колонками.
Если указать только одно значение в свойстве, то браузер выставит данный отступ и для колонок, и для рядов.
Позиционирование полос
В CSS Grid Layout есть два свойства, позволяющие автоматически выровнять полосы внутри контейнера. Это свойства justify-content и align-content . Ничего не напоминает? Те, кто проходил курс по Flex конечно же узнали эти свойства. Теперь вы можете увидеть, как тесно между собой связаны модули CSS Flexible Box Layout и CSS Grid Layout. Разрабатывая с использованием этих двух модулей, вы часто будете пользоваться одинаковыми свойствами, которые, как не трудно догадаться, имеют и одинаковые значения. Посмотрим на них. В качестве примера возьмём 3 полосы, каждую из которых покрасим в свой цвет, чтобы более явно видеть разницу. Сам контейнер покрасим в серый цвет, чтобы видеть его ширину.
justify-content
Свойство justify-content позволяет выровнять Grid-полосы по горизонтали. То есть выравниваются колонки относительно контейнера. Как и в модуле Flex, свойство justify-content может принимать следующие значения:
start — это нормальное поведение элементов внутри контейнера. Все наши столбцы стартуют от левого края и идут по горизонтали друг за другом. Примеры в данном случае излишние.
end — При данном значении все элементы внутри контейнера сместятся к правой границе.
center — как видно из названия, все элементы внутри контейнера будут отцентрованы внутри контейнера.
stretch — Данное значение свойства является значением по умолчанию, когда колонкам не выставлена фиксированная ширина. Чтобы визуализировать это, изменим немного пример. Сделаем колонки с автоматической шириной. Блоки с тёмной границей являются элементами контейнера. Каждый элемент имеет ширину и высоту по 40 пикселей.
Обязательно попробуйте изменить значения свойства justify-content в данном примере, чтобы увидеть, как поведут себя элементы при уже известных вам значениях.
space-around. Здесь всё работает точно так же, как и во Flex. Значение space-around сделает равные отступы между колонками и половину этого расстояния по краям контейнера.
space-evenly. Значение работает так же, как и space-around за одним исключением — отступы по краям контейнера выставляются не в половину расстояния между элементами, а в полную ширину.
space-between. При этом значении все элементы получают одинаковое расстояние между собой. При этом нет никаких отступов от краёв. Первый и последний элемент прижимаются к краям контейнера. Если таких элемента всего два, то они расположатся по краям контейнера.
Как отцентрировать блок в css по горизонтали
I know this question is a million times out there, however I can’t find a solution to my case. I’ve got a div, which should be fixed on the screen, even if the page is scrolled it should always stay CENTERED in the middle of the screen!
The div should have 500px width, should be 30px away from the top (margin-top), should be horizontally centered in the middle of the page for all browser sizes and should not move when scrolling the rest of the page.
Простой способ выровнять элементы в CSS по центру вертикально и горизонтально
Flexbox — относительно новый инструмент в мире CSS, и мы продолжаем находить для него все более интересные места для использования. Первостепенная задача этого дополнения — упростить расположение элементов и выровнять их в CSS по центру экрана, а также отделить друг от друга динамические блоки, размер которых не известен (отсюда и название «flex» — «гибкий»).
С этой технологией мы можем легко и просто решить извечную проблему с выравниванием элемента как по вертикали, так и по горизонтали. Это проще, чем вы можете себе представить — это всего три строки кода, не требуется указывать размер центрированного элемента, а также сама технология проста в использовании.
Этот способ работает во всех современных браузерах — IE10 +, Chrome, Firefox и Safari (с -webkit- префиксом). Полную таблицу совместимости смотрите здесь .
HTML верстка
Идея, конечно, полностью заключается в использовании flexbox. Мы изначально создаем контейнер, в котором мы хотим, чтобы все элементы CSS были расположены по центру:
Вы можете разместить этот контейнер div в любом месте. В приведенном выше примере мы сделали это, взяв всю ширину и высоту страницы.
CSS стили
Как и говорилось ранее, мы будем использовать только три строки кода. Вот они:
Каждый «гибкий» контейнер имеет две оси для позиционирования элементов. Основная ось выражается свойством flex-direction (может быть row или column ). Опустив это правило, мы оставили flex-direction по умолчанию — row .
Теперь все, что нам нужно сделать, — это центрировать обе оси. Сделать это очень просто:
- Преобразуйте тип отображения в flex, чтобы активировать режим flexbox;
- justify-content определяет, где элементы гибкости будут выровняться в соответствии с основной осью (горизонтально в нашем случае);
- align-items делает то же самое с осью, перпендикулярной основной (вертикально в нашем случае).
Теперь, когда мы указали правила вертикального и горизонтального выравнивания элементов CSS по центру, любой элемент, который мы добавляем внутри контейнера, будет располагаться идеально посередине. Нам не нужно заранее знать его размеры, браузер сам сделает всю нужную работу!
Резюмируем
Существует множество других методов для центрирования контента с помощью CSS, но flexbox делает это намного проще и красивее. Если вы хотите узнать больше об этом, ознакомьтесь с этими ресурсами:
Похожие публикации:
- Как сделать изображение черно белым css
- Как сделать картинку прозрачной css
- Как сделать кнопку в css с ссылкой
- Как сделать красивый текст в css