html - 宽度未知的行内 block 元素问题

Question

我想在标题中排列两个元素:

<div class="col-md-3">
    <div class="header">
        <div class="icon"></div>
        <div class="title"><h1>This is the title row</h1></div>
    </div>
    <p>This is some content text. This is some content text. This is some content text. This is some content text. This is some content text. </p>
</div>

左边是一个固定宽度的图标，我想让标题填满剩余的宽度。 (由于栏目狭窄，标题被分成两行):

.col-md-3 {
    width: 200px; /*this width is just for illustrating the problem, in reality this is Bootstrap's 25% width column*/
}
.icon {
    display: inline-block;
    height:50px;
    width: 50px;
    background: red;
}
.title {
    display: inline-block;
}

我无法使用内联 block 让他们排队。有什么想法吗？

PLUNKER

更新

我添加了一个新的 plunker(见上文)以更好地演示问题。

我正在寻找为什么 inline-block 在这种情况下不起作用的解释，以及如何使其起作用的可能解决方案。非常感谢发布的任何解决方法，但我真的很想知道在这种情况下内联 block 的处理方式。

Answer 1

如果 inline-block 的内容在一行中放不下，它将尝试在下一行中作为一个整体放好。这不同于常规的 inline 元素，大多数情况下允许换行到下一行。

您可能想在 W3C specification about the 'normal flow' 上阅读有关此行为的信息.

不知道为什么每个人都把它弄得这么复杂，为什么不使用 float 呢？

.icon {
    float: left;
    width: 50px;
    height: 50px;
    background-color: red;
}
.title {
    padding: 0 10px;
    overflow: hidden;
}
.title h1 {
    line-height: 50px;
    margin: 0;
}

<div class="col-md-3">
    <div class="header">
        <div class="icon"></div>
        <div class="title"><h1>This is the title row erg erg erg erg erg erg er</h1></div>
    </div>
    <p>This is some content text. This is some content text. This is some content text. This is some content text. This is some content text. </p>
</div>