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;
}

我不能让他们使用内联块排队。有什么想法吗？

PLUNKER

更新

我添加了一个新的plunker（见上文）以更好地证明这个问题。

我正在寻找解释为什么内联块在这种情况下不起作用的解释，以及如何使其工作的可能解决方案。发布的任何变通方法都非常受欢迎，但我真的很想知道在这种情况下内联块的处理是什么。

Answer 1

您可以将.header设置为表格，并将.icon和.title设置为表格单元格。

<强> Updated JsFiddle

＆＃13;

.header {
    display: table;
    width: 100%;
}
.header .icon, .header .title {
    display: table-cell;
    vertical-align: middle;
}
.header .icon {
    width: 60px;
}
.header .icon span {
    width: 50px;
    height: 50px;
    display: block;
    background: red;
}
.header .title h1 {
    margin: 0;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<div class="col-md-3">
    <div class="header">
        <div class="icon"><span></span></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>

＆＃13;

Answer 2

如果inline-block的内容不适合单行，则会尝试在下一行中作为一个整体。这与常规inline元素不同，大多数时间允许将其换行到下一行。

您可能希望在W3C specification about the 'normal flow'上了解此行为。

不确定为什么每个人都这么复杂，为什么不使用浮动？

.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>

Answer 3

只需将inline的展示属性值添加到.col-md-3并根据需要进行调整，然后inline-block同时调整为.icon和.title

.col-md-3 {
    width: 200px;
    display: inline;
    vertical-align: middle;
}
.icon {
	display: inline-block;
	height:50px;
	width: 50px;
    background: red;

}
.title {
	display: inline-block;
    height: 50px;
    position: absolute;
   line-height: 5px;
    left: 70px; /* Width of the icon plus 10px for space */
}

<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>

注意：您可能需要进一步调整以适应您的需要。

Answer 4

如果您未指定width元素的inline-block，则默认值为auto。然后，浏览器将尝试根据包含的块宽度计算收缩到适合宽度，在您的情况下，.header元素的宽度基于.col-md-3宽度。在计算.icon元素的宽度时，浏览器不会考虑您的.title元素宽度。因此，为了获得您想要的内容，仍然使用display: inline-block，您必须为.title元素指定宽度。

.title {
    width: calc(100% - 50px);
}

您也可以在float元素上使用.icon。 See this answer

另一种方法是使用display: table来包含块，table-cell用于this answer中提到的子元素。

From the W3C specification：

10.3.9＆＃39;内联块＆＃39;，正常流程中未更换的元素
如果＆＃39;宽度＆＃39;是＆＃39; auto＆＃39;，对于浮动元素，使用的值是收缩到适合宽度。

...

计算缩小到适合宽度类似于使用自动表格布局算法计算表格单元格的宽度。粗略地：通过格式化内容来计算首选宽度而不破坏显式换行发生之外的行，并计算首选最小宽度，例如，通过尝试所有可能的换行符。 CSS 2.1没有定义确切的算法。 第三，找到可用的宽度：在这种情况下，这是包含块的宽度减去使用的＆＃39; margin-left＆＃39;，＆＃39; border-left-的值宽度＆＃39;，＆＃39; padding-left＆＃39;，＆＃39; padding-right＆＃39;，＆＃39; border-right-width＆＃39;，＆＃39; margin-right＆＃39; ，以及任何相关滚动条的宽度。

然后缩小到合适的宽度为：min（最大（最小宽度，可用宽度），首选宽度）。

Answer 5

我会尝试这样的事情：

HTML

<div class="col-md-3">
    <h2>This is the title row</h2>
    <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>

CSS

.col-md-3 {   width: 200px; }
h2 { position: relative; padding-left: 50px;}
h2::before { content:''; position: absolute; height:50px; width: 50px; left: 0; background: red;}

Here's the fiddle

Answer 6

为.title类添加宽度

.title {
    with: calc(100% - 55px);
}

其中55px来自.icon宽度加上5px。

带有未知宽度的内联块元素的问题

6 个答案: