benötigen Abstand zwischen dem Ende des div haben und Anfang des Absatzes

Question

Ich habe Text in einem Absatz-Tag, dass auf dem Boden ein div eng paßt, die Sie in diesem Bild sehen: http://i44.tinypic.com/e05s0z.png

ich einige setzen könnte Padding am unteren Rand der div, um dies zu beheben, aber es kann mehrere Divs geben, abhängig davon, wie viele Elemente auf dieser Seite sind.

Was ich tun muss, ist ein Abstand zwischen dem Ende des allerletzten Div (Klasse = "Artikel") und dem Text innerhalb des Absatz-Tags. Hier

ist die CSS für den Artikel Klasse

.article { 
    padding:10px; 
    overflow:auto; 
} 

Text w/i der Absatz-Tag

<p>Herkimer County Community College does not 
discriminate on the basis of race, color, sex, 
national origin, age, handicap, or marital status 
in admission, employment, or in any aspect regarding 
the conduct of College business.</p> 

Was soll ich tun?

Answer 1

Geben Sie dem letzten Absatz eine ID - #Disclaimer, vielleicht - dann Stil, um Padding-Top zu haben.

<p id="disclaimer">Herkimer County Community College does not 
discriminate on the basis of race, color, sex, 
national origin, age, handicap, or marital status 
in admission, employment, or in any aspect regarding 
the conduct of College business.</p> 

und ...

#disclaimer { 
padding-top: 10px; 
} 

[EDIT] Eine Alternative dazu, basierend auf Ihre Kommentare, würde den Artikel (s) in einem div zu umgeben, und dass div geben. Klasse einen unteren Rand/Padding-Stil.

Answer 2

Sie könnten Ihren Absatz in einen Container mit einer oberen Polsterung verpacken, so dass es nicht darauf ankommt, was darüber steht.

Zum Beispiel wickeln Sie es in einem div mit folgenden CSS

div.finaltext { 
    clear: both; 
    margin-top: 10px; 
} 

Answer 3

Könnten Sie einfach ein paar <br/>-Tags nach dem letzten div hinzufügen?

Answer 4

Wenn Sie andere Absätze haben auf Ihrer Website und wollen sie nicht eine ID oder Klasse geben, dann können Sie auch

.article + p {padding-top: 10px;} 

Einige alte Browser in der Lage, nicht diese Wähler machen aus bedienen, obwohl

Answer 5

gibt es auch die first-child and last-child CSS-Methoden

Hinweis: Check-Browser-Kompatibilität für diejenigen, die Sie wünschen

Answer 6

Hier unterstützt werden Ihre Möglichkeiten so weit wie ich es sehe:

1. die :last-child CSS3 Pseudo Klasse Verwenden Sie das letzte div Ziel. Diese wird nicht von IE überhaupt unterstützt, so hängt davon ab, wie wichtig dieser Browser für Sie ist, ob dies eine Option ist, mindestens aber andere Browser würden den gewünschten Effekt bekommen.

   .article:last-child { padding-bottom: 20px; }

2. eine Klasse zum letzten div mit dem gleichen Stil wie oben hinzufügen. Dies ist nicht ideal und möglicherweise oder möglicherweise nicht möglich, abhängig davon, wie die divs generiert werden.

3. Fügen Sie dem p-Tag eine Klasse mit einem padding-top-Wert hinzu.

4. Verwenden Sie den .article + p Selektor, um ein p-Tag anzusteuern, das ein direkter Teil von .article ist. Dies wird in IE7 unterstützt (denke ich), aber nicht IE6.

Ich würde immer den Vorzug # 1 oder # 4 geben, wie es Unordnung im HTML reduziert, aber wie ich IE erwähnt könnte ein Problem sein, je nach Ihren Bedürfnissen.

(dank Residuum für # 4)

Answer 7

Es ist der Aufbau wie folgt ?:

<div class="article">jdhfksdjhfksdhk</div> 
<div class="article">jdhfksdjhfksdhk</div> 
<div class="article">jdhfksdjhfksdhk</div> 
<p>kfdhsjkfdks</p> 

Sie verwenden padding: 10px so die div innerhalb Marge 10px hat.

Wenn es ein CMS ist, bin ich sicher, dass der Text des Absatzes in ein anderes Tag (DIV) oder vielleicht eine Klasse für die (P) verpackt werden könnte. Wenn dies nicht der Fall ist, kann ich fragen, ob es einen umgebenden Wrapper um alle Artikeldivs und das P-Tag gibt?

Wenn das der Fall ist, dann können Sie mit CSS zu dem P-Tag kommen, wenn nicht, gibt es keine Möglichkeit, dies in jedem Browser zu erreichen.

ODER ... Ich erkannte, dass Sie hier einen Trick machen könnten. aber du musst sicher sein, dass du ein auswählbares div oben auf den Artikel divs hast.

Es sollte wie folgt sein:

.article { margin-top: -5px; margin-bottom: 15px; } 

so wird jeder div.article 5px nach oben verschieben, 10px realer Marge betwen Artikel divs zu verlassen. aber die letzte wird nicht die -5px nach oben bewegen, so dass Sie mit 15px unteren Rand für die P-Tag enden.

Sie könnten mit den Zahlen spielen, um es zur bequemsten Nummer zu machen. Und falls Sie mehr Kontrolle benötigen, dann verwenden Sie die Füllwerte, die Sie auf 10px eingestellt haben, und stellen Sie sie entsprechend ein, um den Randabstand zu kompensieren.