display: inline-block 中的块级元素

Question

display: inline-block 中的块级元素

13

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

然而，display:inline-block元素内部的display:block元素会破坏页面的其余部分；即使在inline-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>

上面的显示为两个窗格，左边是红色，右边是绿色，正如预期。如果我将 "Right" 改为

，会发生什么？

<p>Right</p>

如果我尝试移除它，或者完全删除它，或者（就像我想做的那样）用一些div来替换它，会导致格式错误。

这是Firefox的bug吗？还是我做错了什么？或者我的期望有误？（值得注意的是，IE 7同样混乱，似乎它不理解inline-block；不过这并不重要，因为这是一个内部应用程序，并且我只使用Firefox）。我也许可以使用float/margin来获得所需的布局，但我希望不必这样做。

- David Robins

你使用 <p id="right">Right</p> 吗？ - Jeremy L

不需要。我只想在右侧的div中插入一个简单的<p>标签。在这种情况下，段落本身无需具有id。 - David Robins

3个回答

3

我看到了糟糕的格式。

你被margin collapsing所困扰，这是CSS中一种令人头痛的“技巧”，并不总是有益的。<p>的边距向外折叠，成为内联块的顶部边距；然后它就像“内联”元素一样表现出边距的行为，将文本行的垂直对齐推出去。

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

这是Firefox的一个bug吗？

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

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

- bobince

1

你回答的最后一部分今天帮了我大忙。谢谢。 - Kevin Peno

0

inline-block 这个值会使元素生成一个内联级块容器。内联块的内部被格式化为块级盒子，而元素本身则被格式化为原子内联级盒子。可视化渲染模型

- Bill

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Josh · Accepted Answer

很好，display: inline-block 可能在不同的浏览器中有些棘手。至少需要一些hack技巧，对于Firefox 2来说，可能需要额外的元素。

CSS

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

display: -moz-inline-stack 是针对Firefox 2的。所有直接子元素都需要具有display: block或者是块级元素。请注意，如果您需要使内联块元素收缩包裹，我认为您可以使用display: -moz-inline-box。

zoom: 1将为该元素提供hasLayout（适用于IE7及以下版本）。这是IE7及以下版本兼容性所需的第一部分hack。

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

有时我还需要添加overflow: hidden以实现与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>