1

ということでCSS疑似クラスの前後で実験してみました。これらの擬似を使用してヘッダー要素を作成しようとしました。これは、左右の画像を保持するために div を使用することを減らすためです。これは HTML のコードです

    <header id="mastHead">
        <h1><a href="#">Branding</a></h1>
    </header>

したがって、従来のヘッダー要素を作成するための 3 つの画像があります。これは、左右に幅 20 ピクセル、高さ 100 ピクセル、中央には幅 1 ピクセル、高さ 100 ピクセルで、水平方向に繰り返されます。そしてここに私のCSS

    #mastHead {
        background:url(images/headMiddle.jpg) repeat-x top left;
        width:1000px;
        height:100px;
        overflow:hidden;
    }

    #mastHead:before {
        content:"";
        display:block;
        background:url(images/headLeft.jpg) no-repeat top left;
        width:20px;
        height:100px;
        float:left;
    }

    #mastHead:after {
        content:"";
        display:block;
        background:url(images/headRight.jpg) no-repeat top left;
        width:20px;
        height:100px;
        float:right;
    }

    #mastHead h1 a {
        display:block;
        width:200px;
        height:41px;
        background:url(images/logo.png) no-repeat;
    }

したがって、問題は、h1要素を削除すると完全に整列しますが、これらの要素を配置すると、::after疑似クラスが押し下げられ、高さに応じて残りのスペースが必要になります。このh1要素を作成するにはどうすればよいですか::afterスペースに影響を与えずに中間スペースだけを取るには?

4

1 に答える 1

1

私はあなたの例でフィドルを作りました：http://jsfiddle.net/3Dcw3/（フィドルに収まるように幅を500に設定し、それらを視覚化するために背景を設定します）

そして、ここに修正版があります：http://jsfiddle.net/3Dcw3/1/

ポイントは次のとおりです。

  1. position:relative;ヘッダーに追加します。
  2. フローティングの代わりに絶対配置を使用します。
  3. ブロックがその上に配置されるようにパディングを追加します。
于 2011-08-11T22:40:09.833 に答える