Warum laufen "Inline-Block" -Elemente in einem "Nowrap" -Div-Überlauf?
Der folgende Code führt dazu, dass #headline #wrapper überläuft und ich verstehe nicht, warum dies geschieht.
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;
}
Beispielcode:http://jsfiddle.net/XjstZ/21/ oderhttp://tinkerbin.com/XvSAEfrK