32

ウェブサイトのレイアウト

シンプルなウェブサイトをデザインしていますが、質問があります。私はすべての<div>タグの後class="A"に画像セパレーターを下部に配置したいと考えています<div>（画像を参照、赤いセクションを参照）。CSS オペレーター:afterを使用してコンテンツを作成しています。

.A:after {
    content: "";
    display: block;
    background: url(separador.png) center center no-repeat;
    height: 29px;
}

問題は、画像セパレーターが の後に表示されず<div>、 の CONTENT の直後に表示<div>されないことです。私の場合、段落があり<p>ます。<div class="A">div A の高さと内容に関係なく、画像セパレーターが AFTER に表示されるようにコーディングするにはどうすればよいですか?

4

1 に答える 1

46

絶対に一番下に配置<div>し、忘れずdiv.Aにposition: relative- http://jsfiddle.net/TTaMx/

    .A {
        position: relative;
        margin: 40px 0;
        height: 40px;
        width: 200px;
        background: #eee;
    }

    .A:after {
        content: " ";
        display: block;
        background: #c00;
        height: 29px;
        width: 100%;

        position: absolute;
        bottom: -29px;
    }​
于 2012-06-04T23:57:23.953 に答える