DIV: nach - fügen Sie Inhalt nach DIV

Ich bin eine einfache Website Gestaltung und ich habe eine Frage. Ich möchte nach <div> Tags mit class="A" ein Bild Trennzeichen auf der Unterseite, direkt nach der <div> (siehe Bild, Abschnitt in rot) haben. Ich bin mit dem CSS-Operator :after den Inhalt zu erstellen:

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

Das Problem ist, dass das Bild nicht Separator NACH den <div> angezeigt wird, sondern direkt nach dem Inhalt der <div>, in meinem Fall habe ich einen Absatz <p>. Wie schreibe ich das so, dass der Bildtrenner NACH <div class="A"> erscheint, unabhängig von der Höhe und dem Inhalt von div A?

Quelle

2012-06-04 andrepcg

Haben Sie darüber nachgedacht das Styling der ': after' Inhalt, so dass es einfach * * erscheint außerhalb der sein Objekt, während du darin bleibst? – Jacob

+1 für das Zeichnen! –

Position Ihre <div> absolut am Boden und nicht vergessen div.A ein position: relative zu geben - 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; 
    }

Quelle

2012-06-04 23:57:23

Obwohl es immer noch nur nach dem * Inhalt * des Selektors ist, nicht * hierarchisch *, nach dem ein Problem auftreten kann, wenn Sie eine Art aktives Scripting verwenden müssen. Da es sich jedoch nicht um eine CSS-Operation handelt, benötigen Sie einen DOM-Operator (z. B. Javascript), um der Seite ein Element hinzuzufügen. Sehen Sie sich beispielsweise die Operatoren Hinzufügen und Einfügen von jQuery an. –

DIV: nach - fügen Sie Inhalt nach DIV

Antwort

Verwandte Themen