Я пытаюсь поместить некоторые (вертикально сложенные) элементы display: block в элемент display: inline-block. Согласно спецификации CSS, элемент inline-block должен быть содержащим блоком, поэтому он может иметь элементы display: block внутри него, и они не должны влиять на остальную часть макета.
Тем не менее, display: block elements внутри дисплея: inline-block elements нарушают работу остальной части страницы; то же самое, что вообще ничего не находится внутри встроенного блока или даже базового элемента, такого как абзац; только простой текст предотвращает разрушение остальной части страницы (под разрывом я подразумеваю смещение других делений вниз, например, в этом случае левый красный блок перемещается вниз по линии и имеет над ней пустой пробел). Я использую 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>
или удалите его полностью, или (как я хочу сделать) замените его парой делений, я получаю плохое форматирование.
Это ошибка Firefox, или я делаю что-то не так, или мои ожидания неверны? (FWIW, IE 7 исправляет их все одинаково, как будто он не понимает inline-block; не имеет значения, это внутреннее приложение. Я использую только Firefox). Возможно, я смогу получить нужный макет, используя float / margin, но я бы предпочел не делать этого.