引导程序中的等高嵌套div

Question

所以我正在处理一组内容框，每个内容框都包含一个图像、内容和容器底部的边框。现在我需要让容器的高度相等（因为它看起来更整洁）但我遇到了麻烦，因为我正在应用边框的div 在col-xx-xx div 内，因为我想要排水沟申请。

编辑：认为值得一提的是，full-height-item div 都在工作，并且它们的父级 .full-height 的 100% 高度，但是我无法让其中的 div 填写它们的父级或坐下在底部，所以我可以应用 border-bottom 或 background-color 和 div 的高度，具体取决于哪种方法最好？

这是我的标记：

.full-height {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;    
}

.full-height-item {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

<ul class="full-height">
    <li class="full-height-item col-md-4">
        <div>
            <img alt="" class="img-responsive center-block" src="url" /><br>
            <span style="font-size: 1.2em; font-weight: 500; color: #0067b1">CONTENT TITLE</span><br><br>
            text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
            <div class="full-height-item-content" style="height: 1em; background-color: black"></div>
        </div>
    </li>
    <li class="full-height-item col-md-4">
        <div>
            <img alt="" class="img-responsive center-block" src="url" /><br>
            <span style="font-size: 1.2em; font-weight: 500; color: #0067b1">CONTENT TITLE</span><br><br>
            text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text  text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
            <div class="full-height-item-content" style="height: 1em; background-color: black"></div>
        </div>
    </li>
    <li class="full-height-item col-md-4">
        <div>
            <img alt="" class="img-responsive center-block" src="url" /><br>
            <span style="font-size: 1.2em; font-weight: 500; color: #0067b1">CONTENT TITLE</span><br><br>
            text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
            <div class="full-height-item-content" style="height: 1em; background-color: black"></div>
        </div>
    </li>
</ul>

Answer 1

您的问题对我来说并不完全清楚，因此我可能会误解某些方面。但是，您可能需要解决以下几个问题：

1.嵌套弹性盒

当你创建一个弹性容器时，只有子元素成为弹性项目。子级之外的后代不会成为弹性项目，弹性属性不适用于它们。

您的主容器 (.full-height) 是一个弹性容器，这意味着它的子容器 (.full-height-item) 是弹性项目。您还将 display: flex 应用于 flex 项，使其成为嵌套的 flex 容器，并且包含内容元素的 div 子项是 flex 项。

但是，div 本身不是弹性容器，这意味着它的子元素不是弹性项目，弹性属性（如 align-items: stretch）不会对它们产生影响。

所以第一步是让div 也成为一个弹性容器，就像它的父容器一样。然后可以将 Flex 属性应用于子级。将此添加到您的代码中：

.full-height-item > div {
    display: flex;
    flex-direction: column;
}

2。匿名弹性项目

您的内容（text text text ...）未包含在任何元素中。 这被认为是 anonymous flex item，它能够从父级继承属性，但 - 像 anonymous block and anonymous inline boxes - 是不可选择，因此不可设置样式。

因此，如果您想对文本应用样式，请考虑将其包装在 <span>、<div> 或其他元素中。

<span>text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text
text text text text text text text text text</span>

3.弹性：1

您可以告诉所有弹性项目增长以填满容器，或者您可以只告诉一个。这里我指定内容部分应该增长：

.full-height-item > div > span:last-of-type {
    background-color: lightgreen;
    flex: 1;
}

通过这些调整，您将拥有三个等高且底部有边框的容器。

演示：http://jsfiddle.net/1s613h8g/4/