Block-level elements within display: inline-block

前端未结

关注

 3  1714

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 shoul

相关标签:

3条回答

轮回少年

2020-12-09 19:25
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>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
一个人的身影

2020-12-09 19:28

inline-block This value causes an element to generate an inline-level block container. 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

0 讨论(0)
发布评论:

提交评论
- 加载中...
清酒与你

2020-12-09 19:31

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. The margin of the <p> collapses outwards to become a top margin on the inline-block; 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. 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

I think possibly yes, according to the spec's:

Margins of inline-block elements do not collapse (not even with their in-flow children).

0 讨论(0)
发布评论:

提交评论
- 加载中...