3

http://www.impressivewebs.com/centered-heading-horizo ​​ntal-line/に似ていますが、次の制約がありますが、両側に水平線のある装飾的な見出しを作成しようとしています。

  • 任意のヘッダーテキストをサポートする
  • 流動性-ページの幅に合わせて伸びます
  • 水平線は画像です。各線は装飾的な「先端」画像と、ページ幅を満たすために必要なだけ伸びる繰り返しセクションで構成されています。
  • 装飾的な先端の画像は固定幅です(各297px)
  • ソリューションは、Webページの背景画像で機能する必要があります
  • ページ幅が狭くなると、画像の繰り返しセクションが小さくなり、最終的には消えます。中央の見出しテキストは、必要に応じて複数行に折り返されます。

私はソリューションにのみ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 に答える