css:在扩展父级时匹配元素的宽度

Question

我有一个设置宽度的 div(作为其父级的百分比)，其中包含许多子行。我希望这些行的宽度始终相互匹配 - 因此内容最宽的行将决定其他行的宽度。但是，此宽度也可能大于包含的 div，在这种情况下，div 需要扩展以容纳子行。

这是我的 HTML:

<div class="outer">
    <div class="inner">
        <div class="block-wrapper">
            <h2>First heading</h2>
            <h2>Another heading</h2>
            <h2>The third heading which could be quite long</h2>
        </div>
    </div>
</div>

和当前的 CSS:

.outer {
    width:1000px;
    background-color:#000;
    height:1000px;
}
.inner {
    width: 80%;
    background-color:#FFF000;
    height:50%;
}
.block-wrapper {
    width: 40%;
    background-color:#fff000;
    height:100%;
}
h2 {
    font-size:18px;
    width: 100%;
    float: left;
    clear: left;
    line-height: 40px;
    margin-top: 10px;
    padding:1%;
    background-color:rgba(0,0,0,0.75);
}

这是一个JS Fiddle .

所以我的问题是那里的第三行，“第三个​​标题...”应该全部在一行上，其他 h2 行扩展到相同的宽度。 h2 行的最小宽度应为父 div 的宽度。

我希望这是有道理的……有什么想法吗？

Answer 1

使用 width:auto 和 display:inline-block 更新您的 .block-wrapper。

.block-wrapper {
width: auto;
min-width:40%;
background-color:#fff000;
height:100%;
display:inline-block;
}

DEMO