如何：2个固定宽度div中的可变宽度div？

Question

我正试图设计我的子标题，我的设计中标题的宽度固定在960网格中。

标题的标题需要以尾随装饰结束（在这种情况下，2条线与底部对齐）。所以我创建了一个div来保存标题，并在固定宽度容器内创建一个div来保存装饰。

如何使标题div扩展时，div会自动调整大小？

如果它更容易，这是一个例子：

<h1 class="fixed-width">

    <span class="auto-width">text expands her...</span>

    <span class="auto-decor-width">this is the text decoration</span>

</h1>

以下是图片示例：

Answer 1

根据我的理解，您可能需要http://jsfiddle.net/sandeep/c2sF6/

span{
    display:block
}
.fixed-width{
    width:960px;
}
.auto-width{
   float:left;
   background:green;
}

.auto-decor-width{
    overflow:hidden;
    background:red;
}

Answer 2

变得更简单：

h1 {
    background: red;
}

.auto-width {
    float: left;
    background: green;
}

现场演示： http://jsfiddle.net/c2sF6/1/