html - Flexboxes of equal height，容器内容填充高度

Question

链接到我正在编辑的站点以供引用:http://securitysolutionsnw.businesscatalyst.com/fire-life-safety

这是事物的 CodePen: http://codepen.io/Murgittroyd/pen/HqEvp

我有一个列表项的无序列表，我试图让每个元素具有相同的宽度和高度。我已经开始调查和使用 flex-box，这很有帮助，但我无法让每个框的内容填满列表项的整个高度。本质上，我需要动态调整大小的盒子，但大小取决于最大的 flexbox 的大小……有人有什么想法吗？

HTML:

<ul class="box-list">
    <li>
        <div class="visual">
            <img src="/images/img07.jpg" width="281" height="187" alt="image description" />
            <div class="hover">
                <a href="/fire-life-safety/fire-extinguishers">
                    <span class="ico"><img src="/images/ico-fire-extinguishers-white-large.png" alt="image description" /></span>
                    <span class="text">Learn More</span>
                </a>
            </div>
        </div>
        <div class="content">
            <h3>
                <span class="ico"><img src="/images/ico-fire-extinguishers-white.png" alt="image description" /></span>
                <span class="text">Fire Extinguishers</span>
            </h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc consectetur sed sem ac facilisis. Proin venenatis nisi ut  elit a scelerisque. </p>
        </div>
    </li>
</ul>

CSS:

#content .box-list {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -14px 0 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    color: #fff;
    font-size: 12px;
    line-height: 22px;
}
#content .box-list li {
    float: left;
    padding: 0 14px 43px 0;
    width: 281px;
}
#content .box-list li:after {
    display: none;
}
#content .box-list .content {
    overflow: hidden;
    padding: 18px 20px 33px 33px;
    background: #232a32;
}
#content .box-list .visual {
    position: relative;
    overflow: hidden;
}

Answer 1

是否可以使用纯 CSS 取决于您的确切需求。如果您只需要让每行 li 元素具有相同的高度，那么您就已经正确地做到了。正如您在任何元素检查工具中看到的那样，一行中的 li 元素都是相同的高度(至少在我的 Chrome 浏览器中是这样)。但是，您的 li 的内容不会缩放以填满整个高度。

如果您需要页面上的每个元素具有相同的高度，您可能需要一些 JS。