3

我正在尝试在两侧制作带有水平线的装饰性标题，类似于http://www.impressivewebs.com/centered-heading-horizo ​​ntal-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;
}

我非常感谢任何指导！

4

2 回答 2

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
  • 在nbsp;空的 DIV 中

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

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

于 2013-02-05T16:29:49.657 回答
0

我认为您正在寻找接近此的东西：

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;
}
于 2013-02-04T16:53:05.847 回答