2016-04-12 10 views
0

Ich habe ein Problem. Ich habe eine Tabelle, die ich in Flexbox implementiert habe. Ich möchte die untere "Zeile" ausgerichtet machen, ohne den Abstand der anderen Zeilen zu beeinflussen. (Ich habe „Reihe“ in Anführungszeichen, weil technisch ist es nicht Zeilen, dann ist es die letzte Zelle in drei verschiedenen Spalten)Wie richtet man die untere "Reihe" in der Flexbox aus, ohne die anderen zu beeinflussen?

Hier ist ein Screenshot von dem, was ich erreichen möchte: design I am trying to implement

Here ein JSFiddle von dem, was ich habe bis jetzt. Ich dachte, vielleicht diesen Bit würde es tun, aber es scheint nicht:

div.new-region-page div.three-col-buys a.read-more { 
    align-self: flex-end; 
} 

Ich habe zwei Hauptprobleme - immer die „Mehr“ Zellen auszurichten und über alle Spalten die vertikalen Grenzen auf die gleiche Länge erstrecken.

Es ist keine Option, Flex-Zeilen anstelle von Flex-Spalten zu verwenden, da diese im Mobile-Modus reaktionsschnell zusammenbrechen müssen.

Hoffe jemand kann beraten wie ich das mit flexbox erreichen kann. Ich habe verschiedene Flex-Attribute mit wenig Erfolg ausprobiert.

Antwort

1

Sie müssen den Spalten Container (# top-buys) einstellen, um anzuzeigen: flex; um alle 3 Spalten auf die gleiche Höhe zu bringen.

Sobald Sie tun, dass Sie Ihre Spalteninhalte anpassen können, so dass sie nicht alle aus dem ausgebreitet sind platz zwischen

Einstellung

Wenn Sie hinzufügen Flex wachsen: 0; auf der div.new-regions-Seite a.read-more wird es nach unten geschoben.

+0

Ich habe gerade Ihren Ansatz versucht; Während sich die a.read-more-Zelle ausdehnt, um den vertikalen Raum zu füllen, ist der Text darin immer noch oben ausgerichtet und nicht unten ausgerichtet? – alexbfree

+0

Hmmm. Check out https://jsfiddle.net/codebloo/pbva5ark/1/ – codebloo

+0

Vielen Dank für die Zeit, die mir hier hilft. Das ist sicherlich besser, aber es entspricht nicht dem Design, das ich anstrebe. Ich brauche die oberen Zeilen, um die gleiche Zeilenhöhe, oben ausgerichtet, dann eine große Lücke, dann die untere Reihe, um die gleiche Zeilenhöhe wie die oberen Zeilen zu haben, aber unten ausgerichtet sein. – alexbfree

Verwandte Themen