CSS: die Abstimmung der Elemente innerhalb eines div
Ich habe ein div, enthält drei Elemente, und ich habe Probleme, mich korrekt positionieren die Letzte. Das div auf der linken Seite hat an der linken Seite, der in der Mitte muss zentriert sein und der Dritte muss auf der rechten Seite.
So, ich habe so etwas wie:
#left-element {
margin-left: 9px;
margin-top: 3px;
float:left;
width: 13px;
}
#middle-element {
margin:0 auto;
text-align: center;
width: 300px;
}
#right-element {
float:right;
width: 100px;
}
Mein html sieht so aus:
<div id="container-div">
<div id="left-element">
<img src="images/left_element.png" alt="left"/>
</div>
<div id="middle-element">
I am the text inside the middle element
</div>
<div id="right-element">
I am the text in right element
</div>
</div>
Irgendwelche Ideen?
Dank!
Und das problem ist?
Was ist die Breite des container-div?
Was ist die Breite des container-div?
InformationsquelleAutor luqita | 2011-04-30
Du musst angemeldet sein, um einen Kommentar abzugeben.
Du noch nicht css-Datei für Ihre div-container, aber wenn es enthält bewegliche Elemente, die Sie verbergen sollte überlaufen wie so:
Wenn Sie die position der mittleren div-Sie sind das festlegen von Rändern, die sich über den gesamten container, also keine weiteren Elemente werden immer positioniert sich auf der Linie unten. Beachten Sie, zumindest für die meisten modernen Browsern, weitere. Wenn Sie Sortieren Sie Ihre Elemente, etwa so:
Sollten Sie finden, dass es funktioniert. Bessere Methode, da bin ich mir nicht ganz sicher, ob das soll zu arbeiten, wäre die Verwendung von css-Positionierung. Wenden Sie den folgenden css:
overflow:hidden ist nicht eine gute Methode, clearing der floats, da es unerwartete Probleme mit der CSS3 Eigenschaften. Clearfix ist der bessere Weg zu gehen. fordinteractive.com/2009/12/goodbye-overflow-clearing-hack
InformationsquelleAutor lpd
Ich denken Sie problem ist, dass Sie schwebte Links und rechts element, aber nicht das Zentrum. Probieren Sie etwas wie dieses:
CSS:
HTML:
Du hast Recht, Brent. Ich verwende in der Regel eine Art clearfix Stil als eine Klasse, um die container. Ich bin gewohnt, zu schreiben, alle meine styles in weniger jetzt so schreiben, longform, wie dies ohne meine Mixins in Verbindung und Variablen, die ich manchmal übersehen, das Zeug.
InformationsquelleAutor Jonathan Miller
Das problem ist insbesondere, dass das mittlere div hat eine Breite gesetzt, aber ist nicht geschwommen, was bedeutet, es ist immer noch ein block-level element. Obwohl das div sich nicht die gesamte Breite des Behälters, ist es immer noch als solche behandelt. Sie müssen 2 Sachen zu machen - float der Mitte div, dann klar, die Schwimmer, sodass der container wächst mit der Höhe des child-divs. Die clearfix-Methode wird bevorzugt, da es nicht zu Probleme mit der CSS3-Eigenschaften, die natürlich verlängern außerhalb der Grenzen des Elements, auf die Sie angewendet werden (box-shadow, text-shadow, etc).
http://perishablepress.com/press/2009/12/06/new-clearfix-hack/
InformationsquelleAutor Brent Friar