Элементы уровня блока внутри дисплея: встроенный блок

Я пытаюсь поместить некоторый (вертикально-уложенный) дисплей: блокировать элементы внутри дисплея: элемент встроенного блока. Согласно спецификации CSS, элемент встроенного блока должен быть содержащим блоком, поэтому он может иметь отображение: блокировать элементы внутри него, и они не должны влиять на остальную часть макета.

Однако дисплей: элементы блока внутри дисплея: встроенные блоки блокируют остальную часть страницы; так что не имеет ничего вообще внутри встроенного блока или даже базового элемента, такого как абзац; только простой текст позволяет избежать нарушения остальной части страницы (путем нарушения я имею в виду сдвиг других разделов вниз, например, в этом случае левый красный блок перемещается по строке и имеет пустое пустое пространство над ним). Я использую Firefox 3.0.6.

<html><head><style type="text/css">
#left {
  display: inline-block;
  background: red;
  width: 20%;
  height: 100%;
}
#right {
  display: inline-block;
  background: green;
  width: 80%;
  height: 100%;
}
</style></head><body>
  <div id="left">Left</div><div id="right">Right</div>
</body></html>

Вышеупомянутое показывает как две панели, слева красные, зеленые, как и ожидалось. Если я изменил "Вправо" на

<p>Right</p>

или полностью удалить его или (как я хочу это сделать) заменить его на пару div, я получаю плохое форматирование.

Является ли это ошибкой Firefox, или я делаю что-то неправильно, или мои ожидания неверны? (FWIW, IE 7 управляет ими одинаково, как будто он не понимает встроенный блок, не имеет значения, это внутреннее приложение, и я использую только Firefox). Я могу получить макет, который я хочу использовать float/margin, но я бы предпочел не делать этого.

Ответы

Ответ 1

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

CSS

.inlineBlock { display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline; }

display: -moz-inline-stack для Firefox 2. Все ближайшие дети должны иметь отображение: block или иначе быть элементами уровня блока. Обратите внимание, если вам нужен ваш встроенный блок для сжатия упаковки, я думаю, что вы можете использовать отображение: -moz-inline-box вместо этого.

zoom: 1 дает hasLayout элементу (для IE 7 и ниже). Часть 1 взлома, необходимой для IE7 и ниже совместимости.

** display: inline * является взломом второй части взлома, необходимой для IE7 и ниже совместимости.

Мне иногда нужно добавить переполнение: скрыто для совместимости с IE.

В вашей конкретной ситуации я думаю, что вам нужно:

<html><head><style type="text/css">
#left {
  display: inline-block;
  background: red;
  width: 20%;
  height: 100%;
  vertical-align: top;
}
#right {
  display: inline-block;
  background: green;
  width: 80%;
  height: 100%;
  vertical-align: top;
}
</style></head><body>
  <div id="left">Left</div><div id="right"><p>Right</p><p>Right 2</p></div>
</body></html>

Ответ 2

Я получаю плохое форматирование.

Вы укусаетесь разворот маржи, умение CSS, которое является болью так часто, как это благо. Поля <p> сворачиваются наружу, чтобы стать верхним краем встроенного блока; это ведет себя так же, как маржа будет на "встроенном элементе", нажав вертикальное выравнивание строки текста.

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

Является ли это ошибкой Firefox

Я думаю, возможно, да, согласно спецификации:

Поля элементов встроенного блока не сворачиваются (даже с их дочерьми в потоке).

Ответ 3

встроенный блок   Это значение заставляет элемент генерировать контейнер блока на уровне строки. Внутренняя часть встроенного блока форматируется как блок-блок, а сам элемент форматируется как атомный встроенный блок. визуальная модель рендеринга