CSS 背景由 5 部分图像编译而成，大小为文本

Question

我目前正在 joomla 中制作一个标题，其背景由 5 部分图像组成。应该看起来像这样（只是一个 ASCII 示例）

{==--------} ，

它被分成

1. Left ({=< )
2. 标题（文本背景）
3. 标题-右 (>=-)
4. 中 (-)
5. 右 (-})

希望大家可以想象这一点。现在，标题和中间需要重复 x，但我希望标题根据文本调整大小，据说是文本 div 的背景。我似乎无法正确组合 div 和 css 来正确执行此操作。现在我将每个部分的 div 包裹在 div 中，直到文本。文本结束后，他们会转到下一行。 display: inline 也没什么帮助。我猜我对 CSS 不太擅长。

提前致谢。

注意：我无法附上打印屏幕，因为图像受版权保护。

编辑：中间部分必须扩展，以便右侧部分到达末端，基本上占据整个宽度。

<代码> |<------------------------------DIV 的全宽-------------- ----------------->| {=<短文本>=-------------------------------------------------------- ------------------------} {=<更长的文本>=-------------------------------------------------------- -------------------} {=<更长的文字>=---------------------------------------------------- -----------}

感谢 Bazzz，我找到了一种方法。

由于中间设置为 width: 100% 时将到达右端，因此向后拉一点的唯一方法是使用较短的包装器。然后将“右”部分放在包装纸后面。

HTMLCSS

<div id="Header">
    <div id="Wrapper">
        <span id="Left">&nbsp;</span>
        <h1 id="Title">Title text</h1>
        <span id="Title-Right">&nbsp;</span>
        <span id="Mid">&nbsp;</span>
    </div>
    <span id="Right">&nbsp;</span>
</div>

​

#Header span, #Header h1 {
    display: inline-block;
    white-space:nowrap;
    overflow: hidden;
    width: 570px;
}
#Wrapper span, #Header h1 {
    display: inline-block;
    white-space:nowrap;//Don't wrap into 2nd line
    overflow: hidden;//This help with the 100% width setting
    width: 550px;//Header width - "Right" width
}
#Left {
    width: 20px;
    background: blue;
}
#Title {
    background: yellow;
}
#Title-Right {
    width: 20px;
    background: grey;
#Mid {
    width: 100%; //Maximize this
    background: green;
}
#Right {
    width: 20px;
    background: red;
}

Answer 1

这是我尝试创建您所要求的内容，看看它是否符合您的要求：

http://jsfiddle.net/47Aej/

您显然可以用您的图像替换 background: blue;、background:red; 等。也可以随意更改“标题文本”，看看黄色部分的大小会根据文本而变化（最终与 h1 相同）。

HTMLCSS

<div id="Header">
<span id="Left"> </span><h1 id="Title">Title text</h1><span id="Mid"> </span><span id="Right"> </span>
</div>

​

#Header span, #Header h1 {
    display: inline-block;
}
#Left {
    width: 20px;
    background: blue;
}
#Title {
    background: yellow;
}
#Mid {
    width: 60px;
    background: green;
}
#Right {
    width: 20px;
    background: red;
}