由容器包裹的敏感正方形网格

Question

我试图创建一个没有js的响应方块网格。我遇到了这个很棒的解决方案：

Grid of responsive squares

现在我试图将网格放入容器div中，这样每个方块的宽度/高度将从容器的宽度/高度得出 - 没有运气 - 正方形似乎溢出容器，如下所示：

https://jsfiddle.net/MpXYr/593/

<div style="height:50px;background:blue"><!--sqaures--></div>

我错过了什么？

Answer 1

如果我正确理解你的问题，那么HTML就不够聪明，不能让一个div看另一个并具有相同的高度。当我需要做同样的事情时，我使用了像Match Height这样的JavaScript。然后让你的div（与“square”类）具有相同的高度，你可以引用脚本：

<script src="js/jquery.matchHeight-min.js"></script> <!-- put this on your server and change relative path -->

然后调用函数.matchHeight和你想要具有相同高度的类或id：

<script>
$( document ).ready(function() {

    $(function() {
        $('.square').matchHeight(); /* make all squares have the same height */
    });
});

祝你好运。