javascript - 等高流体箱

Question

我在为 bootstrap 3 创建等高的盒子时遇到了问题。一开始，我遇到了图像大小不同的问题，所以我尝试通过 JS 破解它并动态调整它们的大小。问题是，如果没有图片缓存，JS 会失败，甚至会把布局搞得一团糟。我最终将所有图像调整为 700 x 700 像素，但问题仍然存在，因为随附的文本可能有不同的长度。

我在 fiddle 中创建了一个示例:https://jsfiddle.net/7yqkgm2c/

我不擅长 CSS，我想知道您是否能够帮助我解决问题。

这是我用来使所有盒子高度相同的 JS(将其从 fiddle 中移除)

$(document).ready(function () {
                //function that calculates height and makes all boxes same height. Issue- imeges that are not cached, screwing up the layout
                var heights = $(".thumbnail").map(function () {
                    return $(this).height();
                }).get(),
                        maxHeight = Math.max.apply(null, heights);
                $(".thumbnail").height(maxHeight + 15);
                //end same height products                
            });

这是我想要实现的结果(或者如果您认为自己知道如何更好地处理它，请提出您的解决方案):

Answer 1

这是我的 fiddle :https://jsfiddle.net/vhkmyaf3/18/

假设您可以控制标记，我清理了每个产品的外观:

<div class='product-container col-xs-12 col-sm-6 col-md-3'> 
        <div class='item'>
            <img src='http://placehold.it/700x700' />
            <div class='item-text'>
                <h5>Product Title</h5>
                <p>Product description. Lorem ipsum dolor sit amet.</p>
            </div><!-- end of item-text -->
            <div class='price-point'>
                <div class='price'>$100</div>
                <a class='btn btn-info' href='#'>View</a>
            </div><!-- end of price-point -->
        </div><!-- end of item -->
    </div><!-- end of product-container -->

product-container div 对每个产品使用一次，所有产品容器 div 都出现在名为 items-row 的 div 中。如果您想要一行新的产品，您可以重复 items-row div，但由于您使用的是 Bootstrap ，因此这并不是绝对必要的，因为产品应该堆叠。

我只包含了结构所需的基本 CSS，以及一些填充/边框等以进行说明。实现您想要的均衡高度的关键 CSS 是使用 display:flex :

.items-row, .product-container {
    display: webkit-box;
    display: moz-box;
    display: ms-flexbox;
    display: webkit-flex;
    display: flex;
}

如示例所示，您需要取消 display:flex 并为任何您希望产品堆叠的设备替换为 display:block单列。上面链接的 fiddle 应该表明您的图像尺寸和产品描述可以非常灵活，同时仍然保持均衡的高度。