显示内的块级元素：inline-block [英] Block-level elements within display: inline-block
问题描述
我试图在显示：inline-block元素中放置一些（垂直堆叠）显示：块元素。根据CSS规范，inline-block元素应该是一个包含块，因此它可以在其中具有display：block元素，并且那些不应该影响布局的其余部分。
但是，显示：块元素在显示内：inline-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>左< / div>< div id =right>右< / div>
< / body>< / html>
上面显示为两个窗格，左红色，右绿色，如预期。如果我将右更改为
< p>右< / p&
或者将其全部删除，或者（我想做）我得到了错误的格式。
这是一个Firefox错误，或者我做错了，或者我的期望不正确？ （FWIW，IE 7让他们都一样，就好像不了解inline-block;没关系，这是一个内部应用程序，我只使用Firefox）。
我可以使用float / margin获得我想要的布局，但我不想这样做。 p>井显示：inline-block可能有点棘手的跨浏览器。
CSS
.inlineBlock {display：-moz-inline-stack; display：inline-block; zoom：1; * display：inline; }
display：-moz-inline-stack 所有直接子级都需要具有 display：block 或其他块级元素。注意，如果你需要你的inline-block元素收缩包装我想你可以使用 display：-moz-inline-box 。
em> zoom：1 将hasLayout赋给元素（对于IE 7及以下版本）。
** display：inline *是一个黑客的第二部分，需要IE7和以下的兼容性。 p>
我偶尔需要为IE兼容性添加overflow：hidden。
对于你的具体情况，我想你需要是：
< 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>左< / div>< div id =右>< p>右< / p>< p>右2< / p& / div>
< / body>< / html>
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.
However, the display:block elements inside the display:inline-block elements disrupt the rest of the page; 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, e.g. in this case the left red block moves down a line and has a blank white space above it). I'm using 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.
Is this a Firefox bug, or am I doing something wrong, or are my expectations incorrect? (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). I may be able to get the layout I want using float/margin, but I'd prefer not to have to do that.
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.
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. Note if you need your inline-block element to shrink wrap I think you can use display: -moz-inline-box instead.
zoom: 1 gives hasLayout to the element (for IE 7 and below). Part 1 of the hack needed for IE7 and below compatibilty.
**display: inline* is a hack second part of the hack needed for IE7 and below compatibility.
I occasionally need to add overflow: hidden for IE compatibility as well.
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>
这篇关于显示内的块级元素：inline-block的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
