两侧带有灵活装饰图像的 CSS 标题答案

【问题标题】：CSS heading with flexible decorative images on either side两侧带有灵活装饰图像的 CSS 标题
【发布时间】：2013-01-19 09:51:45
【问题描述】：

我正在尝试制作一个两边都有水平线的装饰性标题，类似于http://www.impressivewebs.com/centered-heading-horizontal-line/，但有以下限制：

支持任意标题文本
流体 - 拉伸以适应页面宽度
水平线是图像 - 每条线都包含一个装饰性“提示”图像，然后是一个重复部分，该部分应根据需要拉伸以填充页面宽度
装饰性提示图像是固定宽度（每个 297 像素）
解决方案必须适用于网页上的背景图片
随着页面宽度的缩小，图像的重复部分会变小并最终消失。如有必要，中间的标题文本会换成多行。

我试图仅将 CSS 用于解决方案，但如果无法使用纯 CSS 完成，我会考虑使用 JavaScript 帮助。

我在 SO 上看到了一些类似的问题，但我认为任何解决方案都不能完全满足我的要求。

这是我自己的幼稚尝试（也在http://jsfiddle.net/39qLr/1/）。为简单起见，我将“提示”图像涂成红色，将灵活的重复图像涂成黄色。明显的问题是黄色部分现在没有出现！

HTML：

<div class="heading-container">
    <div class="left-tip"></div>
    <div class="left-filler"></div>
    <h1>Heading Text</h1>
    <div class="right-filler"></div>
    <div class="right-tip"></div>
</div>

CSS：

.heading-container {
    display: table;
    width: 100%;
}

.left-tip, .right-tip {
    background-color: red;
    width: 297px;
    display: table-cell;
}

.left-filler, .right-filler {
    background-color: yellow;
    display: table-cell;
}

h1 {
    text-align: center;
    display: table-cell;
}

非常感谢任何指导！

【问题讨论】：

你不能为填充物定义一个宽度，因为那样它们就会出现
@Vogel612，我希望填充物填充提示图像和标题文本之间的剩余空间。所以填充的宽度将取决于页面的宽度和页眉文本的宽度。我已经更新了这个问题以明确这一点。谢谢！

标签： html css

【解决方案1】：

我认为您正在寻找与此类似的东西：

http://jsfiddle.net/39qLr/2/

我将图像推送到您的填充物内，以便您可以利用相对位置中的绝对位置。这会将它们固定到最后。

调整宽度以使其正确并注意高度。

<div class="right-filler">
        <div class="right-tip"></div>
</div>

.left-tip, .right-tip {
    background-color: red;
    width: 297px;
    height:50px;
    position:absolute;
}
.left-tip{
    left:0;
}
.right-tip{
    right:0;
}

【讨论】：

谢谢，但我不确定这是否可行，因为它依赖于文本和填充物的百分比宽度（至少在 jsFiddle 中），我希望结果在任意页面宽度下看起来不错并带有任意标题文本。我已经编辑了我的问题以明确这一点。
只是想帮助你朝着你想要的方向前进。该网站不是让某人编写完整解决方案的地方。
我意识到这一点，我非常感谢所有的想法。

【解决方案2】：

在一位同事的帮助下，我们设法尽可能接近：

http://jsfiddle.net/rbCvq/

HTML（与之前相同）：

<div class="heading-container">
    <div class="cell left-tip">&nbsp;</div>
    <div class="cell left-filler">&nbsp;</div>
    <h1 class="cell heading-text">Heading Text</h1>
    <div class="cell right-filler">&nbsp;</div>
    <div class="cell right-tip">&nbsp;</div>
</div>

CSS：

.heading-container {
    display: table;
    width: 100%;
}

.cell
{
    display: table-cell;
}

.left-tip, .right-tip {
  width: 297px;
  background: red;
}

.left-filler, .right-filler {
  background: yellow;
}

.heading-text {
  width: 1px;
  white-space: nowrap;
}

使它起作用的秘诀似乎是：

标题元素的 1px 宽度
添加white-space: nowrap
空 DIV 中的 nbsp;

当然，这不符合我最初将文本换成多行的标准，但我认为整体效果与我们希望的一样好。此外，DIV 上的标记有点重，没有语义目的。

感谢您的所有建议，我希望有一天这对其他人有用！

【讨论】：