Listenelement Unterschiedliche Höhe ausgeben
Wie Sie auf dem Screenshot sehen können, habe ich in der ersten "Spalte" ein Leerzeichen. Ich möchte, dass jeder Listeneintrag in derselben Zeile die gleiche Höhe hat. Es wird immer 2 Gegenstände in jeder Reihe sein, also möchte ich im Grunde alle 2 Gegenstände durchgehen und sie auf die Höhe des höchsten dieser Gegenstände einstellen. Ich habe zahlreiche Lösungen durchgesehen, aber nichts scheint für mich zu funktionieren. Ich habe das Gefühl, ich brauche JS, aber vielleicht nicht.
%Vor% 
7 Antworten
Sie erwähnen nicht, welche Browser-Unterstützung für Ihre Lösung erforderlich ist, aber eine wirklich gute Möglichkeit, etwas zu erreichen, ist die Verwendung von flexbox in CSS (die Browser-Unterstützung ist hier Ссылка und möglicherweise müssen Sie Vendor-Präfixe verwenden, die ich nicht habe, aber das funktioniert derzeit so wie in Chrome." So etwas sollte tun, was du willst:
%Vor%Ich habe noch ein paar andere Änderungen vorgenommen, zum Beispiel die Verwendung von list-style-image zum Anzeigen des Aufzählungszeichens. Es muss nicht als Hintergrund festgelegt werden. Um dies auf diese Weise zu tun, bin ich von Padding-Left nach Margin-Left gewechselt und habe sichergestellt, dass beide% sind, die bis zu 50% ergeben (oder weniger würden auch funktionieren). Ich würde auch empfehlen, em für den unteren Rand anstatt px zu verwenden, damit es besser skaliert.
Es ist auch erwähnenswert, dass Sie eine Anzahl von Listenelementen mit einer Breite von 50% und einer Auffüllung von weiteren 75px hatten. Die CSS-Breite enthält kein Padding, sodass jedes Element eine 50% + 75px-Breite hat, sodass diese Elemente nicht wirklich 2 pro Zeile entsprechen können.
Cross-Browser-kompatible Lösung ohne die Kopfschmerzen von Float
Floats sollten niemals im Layoutdesign verwendet werden. Ihr Zweck ist es, Inhalt in einen Textkörper (wie ein Bild oder eine Seite) einzufügen und den Inhalt elegant um ihn herum fließen zu lassen. Wenn sie missbraucht werden, können ihnen viele Probleme zugefügt werden, und normalerweise, wenn eine Seite mit einem Float ein Problem hat, ist es der Float.
Flexbox ist wunderbar, aber immer noch nicht gut von älteren Browsern unterstützt.
Anstelle von floats oder flexbox sollten Sie display: inline-block; für die Elemente verwenden. Sie sollten auch vertical-align: top verwenden, um das Ausrichtungsproblem zu beheben.
Der Abstand zwischen den Tags wird als Text gerendert und nimmt daher den Platz eines Zeichens ein. Verwenden Sie font-size: 0; für das übergeordnete Element und font-size: 1rem für die Elemente
( Demo )
%Vor%Sie können diesen jquery-Code verwenden
%Vor%Lassen Sie mich das erklären
1.: Ich habe .each() benutzt, um (li) s zu durchlaufen
2.: Ich habe einen boolen check true oder false verwendet, um den Index von li zu überprüfen. Ich meine, wenn check == true, überprüfe den Code für li index [0], li index [2], li index [4]. ..etc
3.: Ich bekomme eine outerHeight (true) für
%Vor%4.: if-Anweisung zu welcher von ihnen höher als eine andere .. und dann diese Höhe an die kleinere li anfügen, indem .css ()
verwendet wird--- & gt; Vergessen Sie nicht, jquery library
einzuschließenWow, ich bin überwältigt von den tollen, qualitativ hochwertigen Antworten! Alle von ihnen sind Optionen, um mit zu gehen, aber nachdem wir etwas später damit herumgespielt haben, habe ich eine einfache Änderung vorgenommen. Ich habe hinzugefügt:
%Vor%und das hat es behoben. Ich bin wirklich nur beschäftigt mit IE 8 und höher , damit das funktioniert. Es ist so eine einfache Lösung. Ich denke, das ist es, was ich bekomme, wenn ich versuche, nach Mitternacht zu arbeiten! Nochmals vielen Dank für alle Antworten!
Tags und Links javascript html jquery css