为什么嵌套在块元素中的多个内联块的innerHTML影响内联块的定位？ [英] Why does the innerHTML of several inline-blocks nested in a block element affect the positioning of the inline-blocks?

问题描述

在这些示例中（注意：请确保将结果窗口拖得足够宽）

In these examples (NOTE: make sure you drag out the result window wide enough)

http://jsfiddle.net/pPyaG/

http://jsfiddle.net/pPyaG/1/

http://jsfiddle.net/pPyaG/2/

为什么数量inline-block元素中的文本会影响同一div中的inline-blocks的定位吗？

Why does the quantity of text inside the inline-block elements affect the positioning of the inline-blocks in the same div?

我可以做什么来确保所有的inline-块元素具有彼此相同的垂直对齐？

What can I do to make sure all the inline-blocks nested inside the block element have the same vertical alignment with respect to each other?

推荐答案

添加 vertical-align： c。

http://jsfiddle.net/thirtydot/pPyaG/3/rel =nofollow> http://jsfiddle.net/thirtydot/pPyaG/3/

http://jsfiddle.net/thirtydot/pPyaG/3/

vertical-align 的初始值为 baseline ，这会导致您遇到问题。

The initial value of vertical-align is baseline, which causes the issue you're experiencing.

阅读这一点，特别是baseline部分： http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

Read this, particularly the "baseline" section: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

vertical-align 的常见值如何比较： http://www.brunildo.org/test/inline-block.html

A comparison of how common values of vertical-align look: http://www.brunildo.org/test/inline-block.html

这篇关于为什么嵌套在块元素中的多个内联块的innerHTML影响内联块的定位？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！