Ich habe zwei Divs nebeneinander. Ich möchte, dass ihre Höhe gleich ist und dass sie gleich bleibt, wenn einer von ihnen die Größe ändert. Ich kann das aber nicht herausfinden. Ideen?
Um meine verwirrende Frage zu klären, möchte ich, dass beide Felder immer die gleiche Größe haben. Wenn also eines wächst, weil Text darin platziert ist, sollte das andere wachsen, um der Höhe zu entsprechen.
<div style="overflow: hidden">
<div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
</div>
<div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">
Some content!
</div>
</div>
html
css
html-table
flexbox
NibblyPig
quelle
quelle
Antworten:
Flexbox
Mit Flexbox ist es eine einzige Deklaration:
Für ältere Browser sind möglicherweise Präfixe erforderlich (siehe Browserunterstützung) .
quelle
flex-direction: column
: jsfiddle.net/sdsgW/1Dies ist ein häufiges Problem, auf das viele gestoßen sind, aber zum Glück haben einige kluge Köpfe wie Ed Eliot in seinem Blog ihre Lösungen online gestellt.
Grundsätzlich machen Sie beide Divs / Spalten sehr groß, indem Sie ein hinzufügen
padding-bottom: 100%
und dann "den Browser austricksen", um zu glauben, dass sie nicht so groß sindmargin-bottom: -100%
. Es wird besser von Ed Eliot in seinem Blog erklärt, der auch viele Beispiele enthält.quelle
padding: 7px 10px
wenn diepadding-bottom
Eigenschaft auf 100% festgelegt ist? (PSoverflow:hidden
wurde auch für mich auf dem benötigtrow
)Dies ist ein Bereich, in dem CSS noch nie wirklich Lösungen gefunden hat - Sie müssen nur
<table>
Tags verwenden (oder sie mithilfe der CSS-display:table*
Werte vortäuschen ), da dies der einzige Ort ist, an dem ein "Bündel von Elementen auf derselben Höhe halten" implementiert wurde.Dies funktioniert in allen Versionen von Firefox, Chrome und Safari, Opera ab Version 8 und in IE ab Version 8.
quelle
table
statttable-row
?width
für Ihre Divs, es sei denn, Sie fügendisplay: table
das übergeordnete Element hinzu, was die Dinge durcheinander bringt.Verwenden von jQuery
Mit jQuery können Sie dies in einem supereinfachen einzeiligen Skript tun.
Verwenden von CSS
Das ist etwas interessanter. Die Technik heißt Faux Columns . Mehr oder weniger stellen Sie die tatsächliche Höhe nicht gleich ein, sondern richten einige grafische Elemente so ein, dass sie gleich hoch aussehen .
quelle
Ich bin überrascht, dass niemand die (sehr alte, aber zuverlässige) Absolute Columns-Technik erwähnt hat: http://24ways.org/2008/absolute-columns/
Meiner Meinung nach ist es sowohl der Faux Columns als auch der One True Layout-Technik weit überlegen.
Die allgemeine Idee ist, dass ein Element mit
position: absolute;
Willen gegen das nächste übergeordnete Element positioniert wird, das hatposition: relative;
. Anschließend dehnen Sie eine Spalte, um 100% Höhe zu füllen, indem Sie sowohl atop: 0px;
als auchbottom: 0px;
(oder die Pixel / Prozentsätze, die Sie tatsächlich benötigen) zuweisen . Hier ein Beispiel:quelle
Sie können das Equal Heights Plugin von Jquery verwenden, um dies zu erreichen. Dieses Plugin macht alle Divs exakt gleich hoch wie andere. Wenn einer von ihnen wächst und der andere auch wächst.
Hier ein Beispiel für die Implementierung
Hier ist der Link
http://www.cssnewbie.com/equalheights-jquery-plugin/
quelle
Sie könnten Faux Columns verwenden .
Grundsätzlich wird ein Hintergrundbild in einem enthaltenden DIV verwendet, um die beiden gleich hohen DIVs zu simulieren. Mit dieser Technik können Sie Ihren Containern auch Schatten, abgerundete Ecken, benutzerdefinierte Ränder oder andere funky Muster hinzufügen.
Funktioniert jedoch nur mit Boxen mit fester Breite.
Gut getestet und funktioniert in jedem Browser richtig.
quelle
Habe gerade diesen Thread entdeckt, als ich nach dieser Antwort gesucht habe. Ich habe gerade eine kleine jQuery-Funktion erstellt, hoffe, das hilft, funktioniert wie ein Zauber:
JAVASCRIPT
HTML
quelle
Der CSS-Rasterweg
Die moderne Art, dies zu tun (wodurch auch vermieden wird, dass
<div class="row"></div>
alle zwei Elemente ein Wrapper deklariert werden muss), wäre die Verwendung eines CSS-Rasters. Auf diese Weise können Sie auch die Lücken zwischen Ihren Artikelzeilen / -spalten einfach steuern.quelle
Diese Frage wurde vor 6 Jahren gestellt, aber es lohnt sich immer noch, eine einfache Antwort mit dem Flexbox- Layout zu geben .
Fügen Sie dem Vater einfach das folgende CSS hinzu
<div>
, es wird funktionieren.In den ersten beiden Zeilen wird angegeben, dass es als Flexbox angezeigt wird. Und
flex-direction: row
teilt den Browsern mit, dass ihre untergeordneten Elemente in Spalten angezeigt werden. Undalign-items: stretch
erfüllt die Anforderung, dass sich alle untergeordneten Elemente auf die gleiche Höhe dehnen, wenn eines von ihnen höher wird.quelle
I'd like both boxes to always be the same size, so if one grows because text is placed into it, the other one should grow to match the height.
was in der akzeptierten Antwort nicht erwähnt wird ... Ich habe gerade eine Vervollständigung hier gemacht. Vielleicht hätte ich die akzeptierte Antwort kommentieren sollen?align-items: stretch;
Flex nicht die Standardeinstellung?Die Verwendung von CSS Flexbox und Min-Height hat bei mir funktioniert
Angenommen, Sie haben einen Container mit zwei Divs im Inneren und möchten, dass diese beiden Divs dieselbe Höhe haben.
Sie würden gesetzt ‚ display: flex ‘ auf dem Behälter sowie ‚ align-Artikel: Stretch ‘
Dann geben Sie einfach das Kind divs eine ‚ min-height ‘ von 100%
Siehe den Code unten
quelle
Wenn es Ihnen nichts ausmacht, dass einer der
div
s ein Meister ist und die Höhe für beidediv
s diktiert, gibt es Folgendes:Geige
Egal was
div
passiert , das rechte wird sich ausdehnen oder quetschen und überlaufen, um der Höhe desdiv
linken zu entsprechen.Beide
div
s müssen unmittelbare untergeordnete Elemente eines Containers sein und ihre Breite darin angeben.Relevantes CSS:
quelle
Ich benutze gerne Pseudoelemente, um dies zu erreichen. Sie können es als Hintergrund für den Inhalt verwenden und sie den Raum füllen lassen.
Mit diesem Ansatz können Sie Ränder zwischen Spalten, Rahmen usw. festlegen.
quelle
Die Geige
HTML
CSS
quelle
Ich habe fast alle oben genannten Methoden ausprobiert, aber die Flexbox-Lösung funktioniert mit Safari nicht richtig, und die Rasterlayout-Methoden funktionieren mit älteren IE-Versionen nicht richtig.
Diese Lösung passt auf alle Bildschirme und ist browserübergreifend kompatibel:
Die obige Methode entspricht der Zellenhöhe, und für kleinere Bildschirme wie Mobilgeräte oder Tablets können wir die
@media
oben erwähnte Methode verwenden.quelle
Sie können jQuery verwenden, um dies einfach zu erreichen.
CSS
jQuery
HTML
Sie müssen jQuery einschließen
quelle
<div>
über dynamischen Inhalt verfügen. Der Grund, den ich sage, ist, wenn Sie<div class="right">
mehr Inhalt haben, dass das andere Problem auftritt.Ich weiß, dass es lange her ist, aber ich teile meine Lösung trotzdem. Dies ist ein jQuery-Trick.
--- HTML
---- CSS
--- JQUERY
quelle
Dies ist ein jQuery-Plugin, das die gleiche Höhe für alle Elemente in derselben Zeile festlegt (indem das offset.top des Elements überprüft wird). Wenn Ihr jQuery-Array also Elemente aus mehr als einer Zeile enthält (unterschiedlicher offset.top), hat jede Zeile eine separate Höhe, basierend auf dem Element mit der maximalen Höhe in dieser Zeile.
};
quelle
quelle
Ich hatte das gleiche Problem, also habe ich diese kleine Funktion mit jquery erstellt, da jquery heutzutage Teil jeder Webanwendung ist.
Sie können diese Funktion bei einem seitenbereiten Ereignis aufrufen
Ich hoffe das funktioniert bei dir.
quelle
Ich bin kürzlich darauf gestoßen und mochte die Lösungen nicht wirklich, also habe ich versucht zu experimentieren.
.mydivclass {inline-block; vertical-align: middle; width: 33%;}
quelle
Was ich hier getan habe, ist, die Höhe in Min-Höhe zu ändern und einen festen Wert zu geben. Wenn einer von ihnen die Größe ändert, bleibt der andere auf der gleichen Höhe. Ich bin mir nicht sicher, ob du das willst
quelle