Question

我试图用水平线做任何一侧的装饰标题，类似于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;
}

我非常感谢任何指导！

Answer 1

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

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上有点沉重，没有任何语义用途。

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

Answer 2

我认为你正在寻找接近这个的东西：

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

我将图像推入填充物中，这样您就可以在相对内部利用位置aboslute。这将使他们达到目的。

摆弄你的宽度以使其正确并注意身高。

<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;
}

CSS标题，两侧都有灵活的装饰图像

2 个答案: