Question

所以我正在处理一组内容框，每个内容框都包含容器底部的图像，内容和边框。现在我需要让容器的高度相等（因为它看起来很整洁），但我遇到麻烦，因为div我正在应用边框是在col-xx-xx {{1我希望应用guttering。

编辑：认为值得一提，div div工作正常，父亲full-height-item的高度为100％，但我无法将.full-height内的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。嵌套Flexbox

创建Flex容器时，只有子元素成为弹性项目。儿童以外的后代不会成为弹性物品，柔韧性不适用于他们。

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

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

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

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

<强> 2。匿名Flex项目

您有未包含在任何元素中的内容（文本文本文本... ）。这被认为是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。 flex：1

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

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

通过这些调整，你有三个高度相等的容器，底部有一个边框。

DEMO：http://jsfiddle.net/1s613h8g/4/

Equal Height在引导程序中嵌套div

1 个答案: