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

StackOverflow https://stackoverflow.com/questions/608172

  •  03-07-2019
  •  | 
  •  

Вопрос

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

Однако элементы display:block внутри элементов display:inline-block нарушают работу остальной части страницы;так же как и отсутствие вообще ничего внутри встроенного блока или даже базового элемента, такого как абзац;только простой текст позволяет избежать нарушения работы остальной части страницы (под нарушением я подразумеваю смещение других разделов вниз, напримерв этом случае левый красный блок перемещается вниз по строке и над ним остается пустое пространство).Я использую 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>

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

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

Это было полезно?

Решение

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

CSS

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

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

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

**дисплей:встроенный * - это вторая часть взлома, необходимая для совместимости с 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>

Другие советы

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

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

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

Это ошибка Firefox

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top