如何：在固定宽度的div中设置2个可变宽度的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/