Как сделать блочный элемент css

Строчно-блочные элементы

Блочные и строчные элементы отлично дополняют друг друга при вёрстке, занимая каждый свою определённую нишу. Но возникают случаи, когда характеристик этих элементов явно недостаточно. Галерея фотографий, представленная на рис. 3.28 состоит из секций, в которые входит изображение с подписью к нему, при этом секции выстраиваются по горизонтали, занимая всю доступную ширину. При уменьшении окна браузера секции переходят на другую строку.

Рис. 3.28. Галерея фотографий

Если для формирования секций использовать тег <div> , как блочный элемент он будет каждый раз начинаться с новой строки. Для строчных элементов нельзя задать цвет фона всей секции и установить её размеры. Наиболее популярное решение в подобных случаях это использование свойства float , которое будет рассмотрено в следующем разделе. Пока же остановлюсь на строчно-блочных элементах, которые сочетают преимущества строчных и блочных элементов.

В HTML нет тега, который относится к строчно-блочным элементам, его можно определить, задав элементу свойство display со значением inline-block .

Характеристики этих элементов следующие.

  • Внутрь строчно-блочных элементов допустимо помещать текст, строчные или блочные элементы.
  • Высота элемента вычисляется браузером автоматически, исходя из содержимого блока.
  • Ширина равна содержимому плюс значения отступов, полей и границ.
  • Несколько элементов идущих подряд располагаются на одной строке и переносятся на другую строку при необходимости.
  • Можно выравнивать по вертикали с помощью свойства vertical-align .
  • Разрешено задавать ширину и высоту.
  • Эффект схлопывания отступов не действует.

Чтобы создать галерею, представленную на рис. 3.28 для тега <div> следует задать значение display как inline-block , а внутрь него добавить изображение и подпись через тег <p> (пример 3.18).

Пример 3.18. Использование display

XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx

Поскольку все фотографии имеют одинаковый размер, ширина блока задана явно и равна 150px, но высота не указывается, поэтому при длинной подписи к рисунку высота секций будет различаться (рис. 3.29).

Разная высота секций

Рис. 3.29. Разная высота секций

Это не является проблемой, поскольку в любом случае секции будут выводиться упорядоченно рядами, несмотря на разную высоту. При этом можно изменить вид выравнивания через vertical-align , добавив это свойство к классу photo . Если указать значение top , то поменяется отображение секций (рис. 3.30).

Выравнивание по верхнему краю

Рис. 3.30. Выравнивание по верхнему краю

Основной проблемой выступает браузер IE до версии 7.0 включительно. Этот браузер применяет значение inline-block только для строчных элементов и с блочными элементами работает некорректно. Чтобы убедить этот браузер правильно отображать наш пример, необходимо вместо inline-block использовать значение inline и установить свойство hasLayout . Добавление inline разрушит макет в остальных браузерах, поэтому правильным решением будет воспользоваться условными комментариями (пример 3.19).

Пример 3.19. Стиль для IE

Конструкция [if lte IE 7] означает применить указанный код для браузера IE версии 7.0 и ниже. Остальные браузеры воспринимают её как комментарий и игнорируют. Что касается свойства zoom , оно нестандартное и предназначено для установки свойства hasLayout , напрямую которое задавать нельзя.

Также строчно-блочные элементы удобно использовать для различных каталогов товаров, которые встречаются в интернет-магазинах. Обычно они выводятся с картинкой и подписью к ней. Всё это похоже на галерею, сделанную выше, поэтому остаётся только модифицировать её код, учесть выравнивание по высоте и поведение IE (пример 3.20).

Пример 3.20. Каталог товаров

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 3.31.

Каталог товаров

Рис. 3.31. Каталог товаров

Чтобы не задавать каждому тегу <div> , которых может быть довольно много, свой класс, в примере введён <div> с идентификатором catalog и стиль применяется к тегам внутри него.

Неправильно ли менять блочный элемент на встроенный с CSS, если он содержит другой блочный элемент?

Я знаю, что неправильно помещать блочный элемент внутри встроенного элемента, но как насчет следующего?

Представьте себе это действительное markup:

Теперь добавьте это CSS:

Это создает ситуацию, когда встроенный элемент содержит блочный элемент (div становится встроенным, а p по умолчанию блокируется)

Являются ли элементы страницы все еще действительными?

Как и когда мы судим, является ли HTML действительным-до или после применения правил CSS?

UPDATE: с тех пор я узнал, что в HTML5 вполне допустимо помещать элементы уровня блока внутри тегов ссылок, например:

Это на самом деле очень полезно, если вы хотите, чтобы большой блок HTML был ссылкой.

9 ответов

Может ли встроенный элемент содержать блочный элемент, например: может ли список содержать абзац?

Когда встроенный блок содержит блок уровня блока в потоке, встроенный блок (и его встроенные предки в пределах одного и того же блока строк) разбиваются вокруг блока уровня блока (и любых братьев и сестер уровня блока, которые последовательны или разделены только складными элементами whitespace и/или out-of-flow), разделяя встроенный блок на два блока (даже если обе стороны пусты), по одному с каждой стороны блока уровня блока(блоков). Блоки строк до и после перерыва заключаются в анонимные блоки блоков, и блок уровня блока становится родным братом этих анонимных блоков. Когда на такое встроенное поле влияет относительное расположение, любое результирующее преобразование также влияет на поле уровня блока, содержащееся во встроенном поле.

Эта модель будет применяться в следующем примере, если следующие правила:

были использованы с этим документом HTML:

Элемент P содержит фрагмент (C1) анонимного текста, за которым следует элемент уровня блока, за которым следует другой фрагмент (C2) анонимного текста. Результирующие блоки будут представлять собой блок-блок BODY, содержащий анонимный блок-блок вокруг C1, блок-блок SPAN и еще один анонимный блок-блок вокруг C2.

Свойства анонимных блоков наследуются от заключающего неанонимного блока (например, в примере чуть ниже заголовка подраздела "Анонимные блок-блоки", для DIV). Не Унаследованные свойства имеют свое начальное значение. Например, шрифт анонимного поля наследуется от DIV, но поля будут равны 0.

Свойства, заданные для элементов, которые вызывают создание анонимных блоков, по-прежнему применяются к блокам и содержимому этого элемента. Например, если бы граница была установлена на элементе P в приведенном выше примере, граница была бы нарисована вокруг C1 (открыта в конце строки) и C2 (открыта в начале строки).

Некоторые агенты пользователей реализовали границы строк, содержащих блоки, другими способами, например, путем обертывания таких вложенных блоков внутри "anonymous line boxes" и, таким образом, рисования встроенных границ вокруг таких полей. Поскольку CSS1 и CSS2 не определили это поведение, пользовательские агенты только для CSS1 и только для CSS2 могут реализовать эту альтернативную модель и по-прежнему заявлять о соответствии этой части CSS 2.1. Это не относится к UAs, разработанному после выпуска этой спецификации.

Делайте из этого, что хотите. Очевидно, что поведение указано в CSS, хотя неясно, охватывает ли оно все случаи или последовательно реализуется в современных браузерах.

Недопустимо вкладывать элемент блочного уровня, например p , непосредственно в встроенный элемент, например b . Однако использование css, таких как display: inline-block или position: absolute is, может быть концептуально обоснованным, чтобы иметь содержимое уровня блока внутри встроенного.

У меня есть элемент button и элемент div. Элемент BUTTON занимает столько места, сколько требуется его содержимому. Элемент DIV занимает всю ширину, так как это блочный элемент. Я попробовал установить display:block на button, но это ничего не дало. Как и width:auto . Я хочу, чтобы BUTTON вел себя.

Независимо от того, является ли это допустимым или нет, структура элемента неверна. Причина, по которой вы не помещаете блочные элементы внутри встроенных элементов, заключается в том, что браузер может отображать элементы легко предсказуемым образом.

Даже если он не нарушает никаких правил ни для HTML, ни для CSS, он все равно создает элементы, которые не могут быть отрисованы должным образом. Браузер должен обрабатывать элементы так же, как если бы код HTML был недействительным.

HTML и CSS будут по-прежнему действительны. В идеале вам не нужно было бы делать что-то подобное, но этот конкретный бит CSS на самом деле является удобным (и синтаксически допустимым, но не семантически допустимым) способом получить ошибку с двойным полем Internet Explorer, не прибегая к условным таблицам стилей или взломам, которые сделают ваш CSS недействительным. (X)HTML имеет большее семантическое значение, чем CSS, поэтому менее важно, чтобы CSS был семантически корректен. На мой взгляд, это приемлемо, потому что это решает раздражающую проблему браузера, не делая ваш код недействительным.

HTML проверяется независимо от CSS, поэтому страница по-прежнему будет действительной. Я совершенно уверен, что спецификация CSS тоже ничего об этом не говорит, но не цитируйте меня по этому поводу. Тем не менее, я был бы очень осторожен, используя подобную технику, так как, хотя она может отображаться так, как задумано в некоторых браузерах, вам нужно будет протестировать их все—я не вижу много гарантий.

Являются ли элементы страницы все еще действительными?

“Valid” в HTML смысле, да; HTML ничего не знает о CSS.

Однако рендеринг, который вы получаете в браузере, "не определен" спецификацией CSS, поэтому он может выглядеть как угодно. Хотя вы могли бы включить такое правило в CSS взлома, направленные на один конкретный браузер (где вы знаете, как этот браузер отображает этот случай), оно не должно использоваться для браузеров в целом.

Я не знаю, насколько это подтверждает какие-либо правила, но я бы рекомендовал использовать валидатор W3C HTML и валидатор W3C CSS, чтобы определить это. Надеюсь, это будет полезно!

Если есть логика, которой вы следуете, и вы в конечном итоге реализуете ее таким образом, это НЕ ТАК. Рабочие вещи не являются "wrong" только потому, что они странные. Да, это довольно необычно, но это не ошибка. Это намеренно. HTML и CSS должны служить вам, а не наоборот, поэтому никогда не слушайте комментарии, говорящие вам не делать этого только потому, что это некрасиво.

Типично называть решение "invalid" и предлагать длинный путь вокруг блока. Иногда вы можете переосмыслить то, что вы сделали. Но тому, что вы сделали, может быть много причин, и они их не учитывают.

Я регулярно использую блоки внутри строк. Это действительно, и это работает — в большинстве случаев это просто не нужно. И что. Помните, когда XHTML сказал нам всегда ставить кавычки вокруг свойств (и все кричали на вас, если вы этого не делали!), теперь HTML5 позволяет опустить их, если внутри нет места. Что случилось с последней косой чертой после сингулярных тегов? "<br />" ? Ну же. Стандарты меняются. Но браузеры продолжают поддерживать и нестандартные вещи. CENTER устарел; мы находимся в 2013 году, и он все еще работает. TABLE для вертикального центрирования? Иногда это единственный выход. DIV внутри А, чтобы он зависал, как вы планировали? Просто продолжай.

Как сделать такой строчно-блочный список с помощью css?

Как можно сделать такой строчно-блочный список, как на фото: введите сюда описание изображения

Это можно осуществить с помощью flexbox:

Поскольку народ испугался таблиц из ужасных баек фронэндеров я заменил её на div. Хотя если подумать таблицы это основополагающий элемент в электронных документах.

&#x412;&#x441;&#x451; &#x435;&#x449;&#x451; &#x438;&#x449;&#x435;&#x442;&#x435; &#x43E;&#x442;&#x432;&#x435;&#x442;? Посмотрите другие вопросы с метками html css или задайте свой вопрос.

дизайн сайта / логотип &#169; 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.12.3.40888

Нажимая &#171;Принять все файлы cookie&#187; вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *