Question

我正在尝试放置一些（垂直堆叠的）显示：显示内的块元素：内联块元素。根据CSS规范，内联块元素应该是一个包含块，因此它可以在其中包含display：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>

以上显示为两个窗格，左红色，右绿色，如预期。如果我将“正确”更改为

<p>Right</p>

或者完全删除它，或者（我想做）用几个div替换它，我得到了错误的格式。

这是Firefox的错误，还是我做错了什么，或者我的期望是不正确的？（FWIW，IE 7将它们全部平分，好像它不理解内联块;无所谓，这是一个内部应用程序。我只使用Firefox）。我可以使用float / margin获得我想要的布局，但我不想这样做。

Answer 1

良好的显示：内联块可能有点棘手，以获得跨浏览器。它至少需要几个黑客，对于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及以下兼容性所需的黑客攻击的第1部分。

** display：inline *是IE7及以下兼容性所需黑客的第二部分。

我偶尔也需要添加overflow：隐藏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>

Answer 2

我收到了错误的格式。

你被margin collapsing所咬，一个CSS'聪明'，这是一种痛苦，因为它是一种福音。＆lt; p＆gt;的边缘。向外坍塌成为内联区块的上边距;然后，这表现为'内联'元素上的边距，推动文本行的垂直对齐。

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

这是一个Firefox错误

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

内联块元素的边距不会崩溃（甚至不包括它们的流入子元素）。

Answer 3

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

显示中的块级元素：内联块

3 个答案: