對齊不同父容器的子元素

我試圖在容器之間垂直對齊可變高度元素，即每個容器中的第一個元素彼此垂直對齊，每個容器中的第二個元素與對方垂直對齊，等等等。對齊不同父容器的子元素

我正在使用flexbox，但不知道這是甚至可能嗎？或者有可能使用CSS Grid？

期望的結果

See demo在那裏我沒有設法得到它的工作呢。

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>

來源

2017-03-03 Ash

必須對準每個柔性項目分別 – vsync

Flexbox將是靈活的。如其中，它允許您的孩子元素根據內容具有不同的尺寸。如果你想鏈接來自不同父母的孩子，你需要給他們規則，禁用家長內部的「flexbox」行爲，並給他們固定的高度。或者你需要改變你的標記，所以你想要相關的所有項目是同一父行內的兄弟姐妹。第三個選項是使用'javascript'連接它們。 –

@AndreiGheorghiu - 是的，這是我試圖擺脫的，即沒有固定的高度，因爲內容可以在高度上變化。我需要所有子元素出現在它自己的父容器中（每次都有未知數量的容器）。 – Ash

試試這個，也許它幫助你

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

現場演示 - http://codepen.io/anon/pen/oZxaja?editors=1100

來源

2017-03-03 12:12:49 grinmax

對不起，也許我沒有很好地解釋自己。我正在尋找每個紅色元素的頂部以便彼此對齊，每個藍色元素的頂部相互對齊，並且每個綠色元素的頂部彼此對齊。 – Ash

@垃圾看第一個容器http://codepen.io/anon/pen/XMdxgE?editors=1100你的意思是？ – grinmax

grinmax我已經添加了一個圖像到上面的最初問題與所需的結果。對困惑感到抱歉。 – Ash

對齊不同父容器的子元素

回答

相關問題