Ausrichten der untergeordneten Elemente verschiedener übergeordneter Container

Ich versuche vertikale Höhenelemente über Container hinweg vertikal auszurichten, dh das erste Element in jedem Container wird vertikal miteinander ausgerichtet, das zweite Element in jedem Container wird vertikal miteinander ausgerichtet, usw ., etc.Ausrichten der untergeordneten Elemente verschiedener übergeordneter Container

Ich benutze flexbox aber nicht sicher, ob das überhaupt möglich ist? Oder ist es möglich, CSS Grid zu verwenden?

erwünschtes Ergebnis

See demo, wo ich es nicht geschafft haben es noch Arbeit zu bekommen.

main { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.container { 
 
    background: grey; 
 
    margin: 0 10px 20px; 
 
    padding: 10px; 
 
    width: 200px; 
 
} 
 

 
.top { 
 
    background: red; 
 
} 
 

 
.middle { 
 
    background: blue; 
 
} 
 

 
.bottom { 
 
    background: green; 
 
}

<main> 
 
    <div class="container"> 
 
    <div class="top">Some text here, Some text here, Some text here</div> 
 
    <div class="middle">And some here, And some here, And some here, And some here, And some here, And some here</div> 
 
    <div class="bottom">And a little here too</div> 
 
    </div> 
 
    <div class="container"> 
 
    <div class="top">Some text here, Some text here</div> 
 
    <div class="middle">And some here, And some here, And some here, And some here, And some here, And some here, And some here, And some here, And some here</div> 
 
    <div class="bottom">And a little here too, And a little here too</div> 
 
    </div> 
 
    <div class="container"> 
 
    <div class="top">Some text here, Some text here, Some text here, Some text here, Some text here</div> 
 
    <div class="middle">And some here</div> 
 
    <div class="bottom">And a little here too</div> 
 
    </div> 
 
    <div class="container"> 
 
    <div class="top">Some text here, Some text here, Some text here</div> 
 
    <div class="middle">And some here, And some here, And some here, And some here, And some here, And some here</div> 
 
    <div class="bottom">And a little here too</div> 
 
    </div> 
 
    <div class="container"> 
 
    <div class="top">Some text here, Some text here, Some text here</div> 
 
    <div class="middle">And some here, And some here, And some here, And some here, And some here, And some here</div> 
 
    <div class="bottom">And a little here too</div> 
 
    </div> 
 
    <div class="container"> 
 
    <div class="top">Some text here, Some text here, Some text here</div> 
 
    <div class="middle">And some here, And some here, And some here, And some here, And some here, And some here</div> 
 
    <div class="bottom">And a little here too</div> 
 
    </div> 
 
    <div class="container"> 
 
    <div class="top">Some text here, Some text here, Some text here</div> 
 
    <div class="middle">And some here, And some here, And some here, And some here, And some here, And some here</div> 
 
    <div class="bottom">And a little here too</div> 
 
    </div> 
 
</main>

Quelle

2017-03-03 Ash

Sie jede flex Element ausrichten müssen separat – vsync

Flexbox flexibel ist. Wie in, erlaubt es Ihren Kindern Elemente, verschiedene Dimensionen abhängig von Inhalt zu haben. Wenn Sie Kinder von verschiedenen Eltern verknüpfen möchten, müssen Sie ihnen Regeln geben, die das 'flexbox'-Verhalten innerhalb der Eltern deaktivieren und ihnen feste Höhen geben. Oder Sie müssen Ihr Markup ändern, damit alle Elemente, auf die Sie sich beziehen möchten, Geschwister in derselben übergeordneten Zeile sind. Die dritte Möglichkeit besteht darin, sie mit 'javascript' zu verknüpfen. –

@AndreiGheorghiu - Ja, das ist, was ich versuchte wegzukommen, d. H. Keine festen Höhen, da der Inhalt in der Höhe variabel sein kann. Und ich muss alle untergeordneten Elemente in seinem eigenen übergeordneten Container anzeigen (es gibt jedes Mal eine unbekannte Anzahl von Containern). – Ash

die Sie interessieren, es Sie vielleicht

.container { 
    background: grey; 
    margin: 0 10px 20px; 
    padding: 10px; 
    width: 200px; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
}

Live-Demo helfen - http://codepen.io/anon/pen/oZxaja?editors=1100

Quelle

2017-03-03 12:12:49 grinmax

Sorry, vielleicht habe ich mich nicht sehr gut erklärt. Ich suche nach der Spitze jedes der roten Elemente, um sich auszurichten, die Oberseite jedes der blauen Elemente, um sich miteinander auszurichten, und die Oberseite jedes der grünen Elemente, um sich miteinander auszurichten. – Ash

@Ash aussehen erster Container http://codepen.io/anon/pen/XMdxgE?editors=1100 Sie meinen? – grinmax

grinmax Ich habe der ersten Frage oben ein Bild mit dem gewünschten Ergebnis hinzugefügt. Entschuldigung für die Verwirrung. – Ash

Ausrichten der untergeordneten Elemente verschiedener übergeordneter Container

Antwort

Verwandte Themen