0

私はより多くの質問を持って戻ってきました！

それはおそらく非常に単純なことですが、それは私を混乱させました。ページと投稿 (Wordpress) の H2 テキストの横に、span:before と span:after を使用して背景画像を配置するようにレイアウトを設定しました。

これがどのように正しく機能しているか、および全体的な CSS で達成したいことは次のとおりです。

http://www.weburton.co.uk/content/demo/?page_id=121

これは現在、CSS の min および max-widths によって実現されています。そして、ページの幅を持つ親要素の下にある幅の部分を自動に設定しました。H2 の幅に基づいて線のサイズが自動的に変更されない理由がわかりません。ここの問題を参照してください：

http://www.weburton.co.uk/content/demo/?p=36

使用する CSS は次のとおりです。

#pagewrapper{ 
    width: 960px;
    margin: 0 auto;
    position: relative; 
    padding-top: 140px;
    text-transform: uppercase;
}

h2 span:before{background:url("http://weburton.co.uk/content/demo/wp-content/themes/epic/images/header_bg.jpg") repeat-x scroll left center transparent;content:" ";height:1px;margin-right:15px; left: 0%; position:absolute; margin-top: 15px; min-width: 25%; max-width: 50%; width: auto; }
h2 span:after{background:url("http://weburton.co.uk/content/demo/wp-content/themes/epic/images/header_bg.jpg") repeat-x scroll right center transparent;content:" ";height:1px; margin-left:15px; right: 0%;  position:absolute; min-width: 25%; max-width: 50%; width: auto;  margin-top: 15px; }

基本的に、考えられるすべてのオプションを使い果たしました。ここに欠けているものはありますか、それとも他の何かを使用してこのスタイリングを達成するための別の方法がありますが、それはより簡単ですか?

ああ、私はいくつかの冗長なスタイリング コールがあることを知っています。私はそれをクリーンアップしている最中です。:)

前もって感謝します！:)

4

2 に答える 2

0

それはあなたが望むものかもしれません

min-widthとからとmax-widthを 削除h2 span:beforeしますh2 span:after

h2 span {
    position:relative;   
}
h2 span:before {
    left: -25%;
    width: 20%;
}
h2 span:after {
    right: -25%;
    width: 20%;
}
于 2012-07-28T21:06:50.277 に答える
0

フィドルがなければ、明確な答えを出すのは難しいですが、displayプロパティをdisplay: inline-blockそれに変更しようとするとうまくいくはずだと思います。

これにより、要素はインラインで表示されたままブロック要素として機能します（したがって、現在のレイアウトが維持されます。通常、ブロック要素は使用可能な幅全体を占め、その後に改行が続きます）。

于 2012-07-28T20:50:10.893 に答える