Я пытаюсь поместить некоторый (вертикально-уложенный) дисплей: блокировать элементы внутри дисплея: элемент встроенного блока. Согласно спецификации 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, но я бы предпочел не делать этого.