引导程序中的等高嵌套div

Posted 2023-03-06

【中文标题】引导程序中的等高嵌套div

【英文标题】：Equal Height nested divs in bootstrap

【发布时间】：2016-02-02 13:48:40

【问题描述】：

所以我正在处理一组内容框，每个内容框都包含一个图像、内容和容器底部的边框。现在我需要让容器的高度相等（因为它看起来更整洁）但我遇到了麻烦，因为我正在应用边框的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  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  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  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>

【问题讨论】：

所有文本都应该在.full-height-item-content div 中吗？

嗨，不。这是一个用于在底部创建边框的 div。我不确定这是最好的方法，是否使容器 div 全高为 full-height-item 然后应用底部边框，或者添加 full-height-item-content 并将其对齐到底部。不过回顾一下，我可以看到，为了让后者工作，它需要 full-height-item-content 位于容器 div 下方，而不是在其中。

另外，文本没有包含在任何元素中。这使得文本块成为匿名元素，使其无法选择，因此无法设置样式（除非它可以从父级继承样式）。

是的，我还没有走那么远，因为我想先让功能正常工作，然后再查看内容本身。我已经使用引导程序大约一年了，这一直是我去年生活的祸根（即垂直对齐）。不过我已经到了那里，开始更好地掌握一切！

基本上问题是试图让未分类的 div 成为父 div 的全高（全高项），所以我可以在内容的底部应用边框，但所有边界排列在一起。我可以将边框应用于全高项目 div，因为它设置为延伸到其父 div，但因为我想要内容之间的排水沟不好。

【参考方案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/

【讨论】：

太棒了！这正是我的意思！我的措辞可能不是最好的！这是我遇到问题的嵌套弹性盒！谢谢先生:)

我认为这是在新引导程序中应用排水沟的最佳方式，我是否正确？还是有更好的方法？

我从来没有使用过引导程序，所以我不会是你那里最好的指导来源......

好的，谢谢您的帮助！它为我节省了几个小时的挫败感！

没问题马克。如果我的回答对您有帮助，请考虑投赞成票和/或打勾。