对齐不同父容器的子元素

我试图在容器之间垂直对齐可变高度元素，即每个容器中的第一个元素彼此垂直对齐，每个容器中的第二个元素与对方垂直对齐，等等等。对齐不同父容器的子元素

我正在使用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

对齐不同父容器的子元素

回答

相关问题