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

Question

I'm trying to put some (vertically-stacked) display:block elements within a display:inline-block element. 我正在尝试放置一些（垂直堆叠）显示：显示内的块元素：内联块元素。 According to the CSS specification, the inline-block element should be a containing block, so it can have display:block elements within it and those should not affect the rest of the layout. 根据CSS规范，内联块元素应该是一个包含块，因此它可以在其中包含display：block元素，这些元素不应影响布局的其余部分。

However, the display:block elements inside the display:inline-block elements disrupt the rest of the page; 但是，display：block元素在显示内部：inline-block元素会破坏页面的其余部分; so does having nothing at all within the inline-block, or even a basic element like a paragraph; 所以在内联块中什么也没有，甚至像段落这样的基本元素; only simple text avoids disruption of the rest of the page (by disruption I mean shifting other divs down, eg in this case the left red block moves down a line and has a blank white space above it). 只有简单的文本才能避免破坏页面的其余部分（通过中断我的意思是将其他div向下移动，例如，在这种情况下，左侧红色块向下移动一行并且在其上方有一个空白空格）。 I'm using Firefox 3.0.6. 我正在使用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>

The above shows as two panes, left red, right green, as expected. 以上显示为两个窗格，左红色，右绿色，如预期。 If I change "Right" to 如果我改变“正确”

<p>Right</p>

or remove it entirely, or (as I want to do) replace it with a couple of divs, I get the bad formatting. 或者完全删除它，或者（我想做）用几个div替换它，我得到了错误的格式。

Is this a Firefox bug, or am I doing something wrong, or are my expectations incorrect? 这是Firefox的错误，还是我做错了什么，或者我的期望是不正确的？ (FWIW, IE 7 mangles them all equally, as if it doesn't understand inline-block; doesn't matter, this is an internal app. and I'm only using Firefox). （FWIW，IE 7将它们全部平分，好像它不理解内联块;无所谓，这是一个内部应用程序。我只使用Firefox）。 I may be able to get the layout I want using float/margin, but I'd prefer not to have to do that. 我可以使用float / margin获得我想要的布局，但我不想这样做。

Answer 1

Well display: inline-block can be a bit tricky to get cross-browser. 好的显示：内联块可能有点棘手，以获得跨浏览器。 It will require at minimum, a few hacks and, for Firefox 2, potentially an extra element. 它至少需要几个黑客，对于Firefox 2，可能需要额外的元素。

CSS CSS

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

display: -moz-inline-stack is for Firefox 2. All the immediate children will need to have display: block or otherwise be block level elements. display：-moz-inline-stack适用于Firefox 2.所有直接子节点都需要显示：block或者是块级元素。 Note if you need your inline-block element to shrink wrap I think you can use display: -moz-inline-box instead. 注意如果你需要你的inline-block元素来收缩包装我认为你可以使用display：-moz-inline-box代替。

zoom: 1 gives hasLayout to the element (for IE 7 and below). zoom：1给出了元素的hasLayout（对于IE 7及以下版本）。 Part 1 of the hack needed for IE7 and below compatibilty. IE7及以下兼容性所需的黑客攻击的第1部分。

**display: inline* is a hack second part of the hack needed for IE7 and below compatibility. ** display：inline *是IE7及以下兼容性所需的hack的第二部分。

I occasionally need to add overflow: hidden for IE compatibility as well. 我偶尔需要添加overflow：隐藏IE兼容性。

For your specific situation i think what you need is: 针对您的具体情况，我认为您需要的是：

<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

I get the bad formatting. 我得到了糟糕的格式。

You are being bitten by margin collapsing , a CSS 'cleverness' which is a pain as often as it is a boon. 你被边缘崩溃所困扰，一个CSS'聪明'，这是一个痛苦，因为它是一个福音。 The margin of the <p> collapses outwards to become a top margin on the inline-block; <p>的边缘向外坍塌，成为内联区块的上边距; this then behaves as a margin would on an 'inline' element would, pushing the vertical-alignment of the text line out. 然后，这表现为“内联”元素上的边距，推动文本行的垂直对齐。

You can stop it happening by removing the margins from 'p' elements and using padding instead. 您可以通过从'p'元素中删除边距并使用填充来阻止它发生。 Alternatively place a non-empty element with no top margin at the top of the block and one with no bottom margin at the bottom. 或者，在块的顶部放置一个非空元素，顶部没有边缘，底部没有底边。

Is this a Firefox bug 这是一个Firefox错误

I think possibly yes, according to the spec's: 我认为可能是的，根据规范：

Margins of inline-block elements do not collapse (not even with their in-flow children). 内联块元素的边距不会崩溃（甚至不包括它们的流入子代）。

Answer 3

inline-block This value causes an element to generate an inline-level block container. inline-block此值使元素生成内联级块容器。 The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box. 内联块的内部被格式化为块框，元素本身被格式化为原子内联级框。 visual rendering model 视觉渲染模型

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

问题描述

3 个解决方案

解决方案1
6 已采纳 2009-03-03 21:13:36

解决方案2
3 2009-03-03 21:59:49

解决方案3
0 2014-12-06 03:02:11

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

问题描述

3 个解决方案

解决方案1 6 已采纳 2009-03-03 21:13:36

解决方案2 3 2009-03-03 21:59:49

解决方案3 0 2014-12-06 03:02:11

解决方案1
6 已采纳 2009-03-03 21:13:36

解决方案2
3 2009-03-03 21:59:49

解决方案3
0 2014-12-06 03:02:11