Paul Tarjan
Ich habe eine Menge float: left Elemente und einige sind ETWAS größer als andere. Ich möchte, dass der Zeilenumbruch unterbrochen wird und die Bilder ganz nach links schweben, anstatt an einem größeren Element hängen zu bleiben.
Hier ist die Seite, die ich meine: Verknüpfung
Wenn sie alle die gleiche Größe haben, funktioniert es wunderbar: Verknüpfung
Vielen Dank! (Ich würde lieber nicht in Javascript oder serverseitiges Skripting einsteigen, wenn ich nicht muss)
Alex Gjoschew
Nun, wenn Sie es wirklich brauchen float Deklarationen haben Sie zwei Möglichkeiten:
clear: left auf den Elementen ganz links – der Nachteil ist, dass Sie eine feste Anzahl von Spalten habenheight – entweder per Skript oder durch Hartcodierung der Höhe im CSSBeide sind einschränkend, weil sie die Funktionsweise von Schwimmern umgehen. Sie können jedoch die Verwendung in Betracht ziehen display: inline-block Anstatt von float, wodurch ein ähnliches Layout erzielt wird. Sie können dann ihre Ausrichtung mit anpassen vertical-align.
Das ist nicht richtig. Es gibt eine zufriedenstellende CSS-Antwort. Siehe @David Davepermen Spörris Antwort.
– Wagen vor dem Pferd
17. April 2013 um 14:39 Uhr
Vielen Dank, dass Sie darauf hingewiesen haben. Ich habe die Antwort aktualisiert, um auch diesen Ansatz widerzuspiegeln.
– Alex Gjoschew
9. März 2015 um 12:33 Uhr
David Davepermen Spörri
Ich habe es durch Entfernen behoben float:leftund hinzufügen display:inline-block stattdessen. Habe es nicht für Bilder verwendet, sollte aber auch dort gut funktionieren.
Dies ist meiner Meinung nach die richtige Antwort (zumindest für den allgemeinen Fall). Ich verwende in meinem Fall jedoch keine Bilder (wenn dies einen Unterschied macht, können Sie Ihr Bild jederzeit in eine <div> oder <li> abstrahieren). Beachten Sie, dass Sie möglicherweise auch verwenden möchten vertical-align:top. Standardmäßig wird unten ausgerichtet, was etwas seltsam aussehen kann, wenn die Kästchen eine deutlich unterschiedliche Größe haben (was in meinem Fall wiederum der Fall ist).
– Wagen vor dem Pferd
17. April 2013 um 14:31 Uhr
Ich hatte ein ähnliches Problem u display:inline-table funktionierte am besten für mich; thx für den hinweis 🙂
– Nick Humphrey
25. August 2015 um 15:57 Uhr
Ich kann nicht erkennen, wie dies das Problem löst. Was ist mit Leerzeichen? inline-block ist nur eine gute Methode, wenn Sie Ihr HTML minimieren.
– adi518
9. August 2016 um 15:03 Uhr
Verwenden display:inline-block
Vielleicht finden Sie auch vertical-align: top oder vertical-align:middle nützlich.
Das habe ich getan. Scheint zu funktionieren, um eine neue Zeile zu erzwingen, aber ich bin in keiner Weise ein HTML/CSS-Guru.
<p> </p>
Sie können sie in ein Div packen und dem Div eine festgelegte Breite geben (vielleicht die Breite des breitesten Bildes + Rand?) und dann die Divs floaten. Setzen Sie dann die Bilder in die Mitte ihrer enthaltenden Divs. Ihre Ränder zwischen den Bildern werden für die unterschiedlich großen Bilder nicht einheitlich sein, aber sie werden viel schöner auf der Seite angeordnet sein.
Wie verhindert das Erzwingen einer Breite, dass sie kleben, ist es nicht ein Höhenproblem? Und wie kann ich die Höhe der Bilder ohne Codierung berechnen?
– Paul Tarjan
25. September 2009 um 10:12 Uhr
Sie können dem enthaltenden div auch eine Höhe zuweisen. Holen Sie sich einfach die Höhe in Pixel des längsten Bildes und machen Sie das zur Höhe. Sie können die Höhe in Pixel erhalten, indem Sie Ihr Bild in Photoshop oder Fireworks oder einem anderen Bilddienstprogramm öffnen, das Sie bevorzugen. In dem von Ihnen bereitgestellten Link scheint der längste Container 140 Pixel zu sein; alles, was kleiner ist, klebt.
– Evernoob
25. September 2009 um 10:17 Uhr
hmm, alle meine Bilder werden dynamisch generiert, daher variieren die Höhen. Ich schätze, ich bin unten, um Javascript zu tun …
– Paul Tarjan
25. September 2009 um 10:19 Uhr
nein, nicht die Bilder, die Höhe des div, das sie enthält. Fügen Sie diese Höhe in Ihr CSS ein.
– Evernoob
25. September 2009 um 10:20 Uhr
Richtig, aber wie berechne ich diese Höhe? Ich habe viele “Sets”, die alle unterschiedliche Bilder mit unterschiedlichen Höhen haben: stdicon.com
– Paul Tarjan
25. September 2009 um 10:21 Uhr
Codeasaurus
Dies ist ein alter Beitrag und die Links sind nicht mehr gültig, aber da er früh in einer Suche auftauchte, die ich durchführte, dachte ich, ich sollte einen Kommentar abgeben, um anderen zu helfen, das Problem besser zu verstehen.
Durch die Verwendung von Float bitten Sie den Browser, Ihre Steuerelemente automatisch anzuordnen. Es reagiert, indem es umbricht, wenn die Steuerelemente nicht in die Breite für ihre angegebene Float-Anordnung passen. float:left, float:right oder clear:left,clear:right,clear:both.
Wenn Sie also eine Reihe von float:left-Elementen zwingen möchten, gleichmäßig in einer linken Spalte zu schweben, müssen Sie den Browser dazu bringen, zu entscheiden, sie mit der gleichen Breite einzuwickeln/auszupacken. Da Sie kein Skripting durchführen möchten, können Sie alle Steuerelemente, die Sie schweben lassen möchten, in einem einzigen div zusammenfassen. Sie möchten ein neues Wrapping-Div mit einer Klasse wie der folgenden hinzufügen:
.LeftImages{
float:left;
}
html
<div class="LeftImages">
<img...>
<img...>
</div>
Dieses Div passt sich automatisch an die Breite des größten Bildes an und alle Bilder werden die ganze Zeit mit dem Div nach links verschoben (kein Umbruch).
Wenn Sie immer noch möchten, dass sie umbrochen werden, können Sie dem div eine Breite wie width:30% und jedem der Bilder das float:left; Stil. Anstatt sich an das größte Bild anzupassen, wird es in der Größe variieren und die enthaltenen Bilder umbrechen lassen.
Wie verhindert das Erzwingen einer Breite, dass sie kleben, ist es nicht ein Höhenproblem? Und wie kann ich die Höhe der Bilder ohne Codierung berechnen?
– Paul Tarjan
25. September 2009 um 10:12 Uhr
Sie können dem enthaltenden div auch eine Höhe zuweisen. Holen Sie sich einfach die Höhe in Pixel des längsten Bildes und machen Sie das zur Höhe. Sie können die Höhe in Pixel erhalten, indem Sie Ihr Bild in Photoshop oder Fireworks oder einem anderen Bilddienstprogramm öffnen, das Sie bevorzugen. In dem von Ihnen bereitgestellten Link scheint der längste Container 140 Pixel zu sein; alles, was kleiner ist, klebt.
– Evernoob
25. September 2009 um 10:17 Uhr
hmm, alle meine Bilder werden dynamisch generiert, daher variieren die Höhen. Ich schätze, ich bin unten, um Javascript zu tun …
– Paul Tarjan
25. September 2009 um 10:19 Uhr
nein, nicht die Bilder, die Höhe des div, das sie enthält. Fügen Sie diese Höhe in Ihr CSS ein.
– Evernoob
25. September 2009 um 10:20 Uhr
Richtig, aber wie berechne ich diese Höhe? Ich habe viele “Sets”, die alle unterschiedliche Bilder mit unterschiedlichen Höhen haben: stdicon.com
– Paul Tarjan
25. September 2009 um 10:21 Uhr
rahul
Hinzufügen .icons div {width:160px; height:130px;} wird sehr gut klappen
Hoffe es wird helfen
Leider haben alle meine Seiten unterschiedlich große Bilder, wie das machen wird stdicon.com/tango sehen ziemlich hässlich aus 🙁
– Paul Tarjan
25. September 2009 um 10:20 Uhr