为什么要“内嵌" "nowrap"中的元素div溢出? [英] Why do "inline-block" elements in a "nowrap" div overflow?

问题描述

以下代码导致#headline溢出#wrapper，但我不明白为什么会这样.

The following code causes #headline to overflow #wrapper and I do not understand why this is happening.

HTML:

<div id="wrapper">
    <div id="logo">
        <img src="/test.png">
    </div>
    <div id="headline">
        <h1>This headline overflows its wrapping div. # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #</h1>
    </div>
</div>

CSS:

#wrapper {
    background: #fea;
    white-space: nowrap;
    width: 50%;
}

#logo {
    display: inline-block;
    vertical-align: middle;
}

#logo img {
       width: 6em; 
}

#headline {
     display: inline-block;
     vertical-align: middle;
     white-space: normal;
}

示例代码: http://jsfiddle.net/XjstZ/21/或 http://tinkerbin.com/XvSAEfrK

推荐答案

顾名思义，内联块参与内联布局，这意味着它们的行为就像内联元素和文本一样. white-space: nowrap通过防止自动换行导致文本在元素中溢出；内联块也会发生相同的情况.就这么简单.

As the name suggests, inline-blocks participate in inline layout, which means they act just like inline elements, and text. white-space: nowrap causes text to overflow in an element by preventing it from wrapping; the same thing happens with inline-blocks. It's that simple.

#headline具有white-space: normal的事实对其本身的布局没有影响.元素的white-space属性会影响其内容的布局，而不会影响其本身的布局，即使该元素自己的框是内联级别的.

The fact that #headline has white-space: normal has no impact on its own layout. An element's white-space property affects the layout of its contents, not itself, even if the element's own box is inline-level.

这篇关于为什么要“内嵌" "nowrap"中的元素div溢出?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！