显示中的块级元素：inline-block答案

【问题标题】：Block-level elements within display: inline-block显示中的块级元素：inline-block
【发布时间】：2010-10-11 03:01:25
【问题描述】：

我正在尝试将一些（垂直堆叠的） display:block 元素放在 display:inline-block 元素中。根据 CSS 规范，inline-block 元素应该是一个包含块，因此它可以在其中包含 display:block 元素，并且这些元素不应影响布局的其余部分。

但是，display:inline-block 元素中的 display:block 元素会破坏页面的其余部分；在内联块中什么都没有，甚至像段落这样的基本元素也是如此；只有简单的文本才能避免页面其余部分的中断（中断是指将其他 div 向下移动，例如，在这种情况下，左侧的红色块向下移动一行并在其上方有一个空白区域）。我使用的是 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 平等地破坏它们，好像它不理解 inline-block；没关系，这是一个内部应用程序。我只使用 Firefox）。我也许可以使用浮动/边距获得我想要的布局，但我不想这样做。

【问题讨论】：

你使用
对
吗？
没有。我只想要一个简单的
在右侧 div 中。在这种情况下，段落本身不需要有 id。

标签： html css cross-browser

【解决方案1】：

显示效果：内联块跨浏览器可能有点棘手。它至少需要一些 hack，对于 Firefox 2，可能需要一个额外的元素。

CSS

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

display: -moz-inline-stack 适用于 Firefox 2。所有直接子级都需要具有 display: block 或其他块级元素。请注意，如果您需要 inline-block 元素来收缩包装，我认为您可以使用 display: -moz-inline-box 代替。

zoom: 1 将 hasLayout 赋予元素（对于 IE 7 及更低版本）。 IE7 及以下兼容性所需的 hack 的第 1 部分。

**display: inline* 是 IE7 及以下兼容性所需的 hack 的第二部分。

我偶尔需要添加溢出：隐藏以兼容 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>

【讨论】：

我正在使用 Firefox 3。我现在不关心 Firefox 2（或任何其他浏览器）。 FF3 是否需要这些 hack？
FF3 应该有完全支持。
抱歉，误会了，您原来的问题。
垂直对齐：顶部得到它。我之前在玩它时设置了垂直对齐（当时仍然使用浮点数），但没有在这个减少中。非常感谢。

【解决方案2】：

我得到了错误的格式。

你被 margin collapsing 咬了，这是一种 CSS 的“聪明”，它既是一种痛苦，也是一种恩惠。

的边距向外折叠成为内联块的顶部边距；然后，这就像“内联”元素上的边距一样，将文本行的垂直对齐推出。

您可以通过删除“p”元素的边距并改用填充来阻止它发生。或者在块的顶部放置一个没有上边距的非空元素，在底部放置一个没有下边距的非空元素。

这是 Firefox 的错误吗

根据规范，我认为可能是的：

内联块元素的边距不会折叠（即使是它们的流入子元素）。

【讨论】：

今天你回答的最后一部分让我很生气。谢谢。

【解决方案3】：

内联块此值使元素生成内联级块容器。内联块的内部被格式化为块框，元素本身被格式化为原子内联级框。 visual rendering model

【讨论】：