div элементы в одну строку
Используй display: inline-block или float: left на селектор .div1 Подробнее про выравнивание элементов.
Отслеживать
9,808 5 5 золотых знаков 28 28 серебряных знаков 58 58 бронзовых знаков
ответ дан 24 июн 2016 в 9:56
21 1 1 бронзовый знак
Пожалуйста, постарайтесь публиковать развернутые ответы содержащие конкретный пример минимального решения, дополняя их ссылкой на источник. Ответы–ссылки (как и комментарии) не добавляют знаний в Рунет.
28 ноя 2016 в 8:20
Все дело в том, что внутри — блочный элемент. Попробуйте так:
123 123 123 SPAN — inline элемент, но DIV — блочный. Результат — все в столбик.
Уберите везде DIV — получите результат в строку.
Для того, чтобы получить то, что хотите — можно указать не display: inline, а display: inline-block, либо делать через таблицы (не в тегах, а в стилях — например, display: table)
Разница между и
Элементы из предыдущей главы выводятся последовательно на одной горизонтальной строке. Они ведут себя как обычный текст и просто отображаются рядом друг с другом, даже если они имеют определённые размеры и другие свойства, которые не относятся к тексту. Это не должно удивлять, так как , и — элементы, которые относятся к одной группе называемой строчно-блочной. Такие элементы могут иметь разные размеры, однако браузер всегда отображает их горизонтально подобно тексту. В этой главе мы узнаем о различных группах элементов в соответствии с тем, как они выкладываются на странице.
Для начала давайте разберём, как отображать один элемент под другим по вертикали. Мы в основном должны сказать браузеру: «Эй, мы хотим контейнер, который может стыковаться вертикально». К счастью, это тег контейнера известен как и это своего рода «перенос» содержания на новую строку (вроде разрыва страницы или разрыва строки в текстовых редакторах).
Чтобы увидеть как работают элементы используем три из них и установим для них ширину, высоту и фон.
Согласно приведённым выше условиям, HTML будет выглядеть следующим образом.
В CSS мы пишем класс .container , который связан с тегом .
.container
Посмотрим на это в браузере.
Похоже на один большой прямоугольник. Как насчёт отделить теги друг от друга?
.container
Я добавил свойство margin-bottom (выделено выше), чтобы отделить каждый отступом снизу в 10 пикселей. Пришло время проверить эффект в браузере.
Отлично! Браузер отображает эти «блоки» один под другим, в отличие от нашего предыдущего примера с формой, где элементы выводились в одну строку.
В чём различие? Когда дело доходит до отображения тегов, браузер распознаёт три группы элементов:
- inline (строчные);
- block (блочные);
- inline-block (строчно-блочные).
Строчные элементы не вызывают перевода на новую строку и показывают один элемент рядом с другим по горизонтали. Блочные элементы устанавливаются как блоки, которые укладываются по верхней части друг друга и никогда не отображаются рядом по горизонтали, если мы не используем магические трюки в CSS (о которых узнаем в следующей главе). Строчно-блочные действуют в качестве строчных элементов (отображаются рядом друг с другом), но отличаются от них тем, что им можно задать размер. К примеру, поле может отображаться как большой прямоугольник, но при этом занять пространство за пределами одной строки текста.
Позвольте мне поделиться с вами некоторыми примерами элементов, которые можно классифицировать в соответствии с одной из этих трёх групп.
По умолчанию, у строчных элементов стилевое свойство display установлено как inline . Для блочных элементов его значение block , а для строчно-блочных элементов inline-block . Теперь вы можете объяснить, из-за чего тег не переносит текст на новую строку. Потому что это строчный элемент, а значит в CSS у него свойство display установлено как inline . С учётом этого код ниже:
один два триБраузер отобразит в одну линию:
Однако можно изменить это поведение, добавив одну строку в CSS:
span
Теперь наши теги отображаются иначе, каждый из них начинается с новой строки, поскольку мы установили свойство display как block .
Для этого примера мы используем . Вы можете поинтересоваться, что этот тег описывает в документе. Краткий ответ: ничего. Мы используем тег в тех случаях, когда все другие теги не подходят для использования того, что мы вложили в документ. В общем случае тег (в сочетании с разными классами) применяется для получения различных визуальных эффектов, в результате у него нет функции для описания содержимого. К примеру, если вы желаете сделать три вертикальных колонки на сайте, то, возможно, потребуется элемент, который может разделить некоторые строчные или строчно-блочные элементы.
Вообще, хорошей идеей будет не злоупотреблять тегом , если это возможно.
С нашими новыми знаниями о блоках давайте переделаем код нашей формы так, чтобы поля формы и их описания красиво отображались друг под другом.
Это выглядит чуть сложнее, но единственное что мы сделали, так это добавили теги , чтобы окружить каждый элемент формы.
Ещё раз, давайте сравним новый (справа) и старый код (слева).
А теперь посмотрим, как новый код отображается в браузере!
Наша форма теперь выглядит превосходно!
Свойство display
Задает тип элемента и позволяет менять поведение элемента в потоке, а так же меняет работу некоторых CSS свойств в соответствии с выбранным типом.
display: block;
Пошаговый план! Как быстро научиться создавать сайты!
iOS Safari
Значения
display: значение;
Значения, которые задают тип элементу и влияют на поток элемента в документа: block, inline
Значения, которые определяют как будут располагаться дочерние элементы блока: table, flex, grid
Значения, которые задают тип элемента и работают только если являются дочерними элементами с определенным типом: table-row-group, table-header-group, table-footer-group, table-column-group, table-column, table-caption, table-cell, table-row
Другие значения: inline-block, inline-flex, inline-grid, list-item
display: none;
Элемент скрыт со страницы, как если бы его не было в HTML
.example-1
Предыдущая запись