Question

链接到我正在编辑的网站以供参考：http://securitysolutionsnw.businesscatalyst.com/fire-life-safety

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

我有一个无序的列表项列表，我试图让每个项目的宽度和高度相同。我已经开始调查并使用flex-box，这有帮助，但是我无法获得每个框的内容来填充列表项的整个高度。从本质上讲，我需要动态大小的盒子，但是最大的弹性盒的尺寸......任何人都有任何想法吗？

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。

Answer 2

所以我找到了各种解决方案，只是屏蔽了整个li与.content相同，因为（如Wouter Florijn指出的那样）{{由于使用flex，1}}已经是相同的高度。以下是我更改CSS的方法，基本上只是将所有li更改为padding，因此margin会填充background-color：

li

Flexboxes高度相等，容器内容物填充高度

2 个答案: