由容器包裹的响应方块网格[重复]

Posted 2023-03-06

【中文标题】由容器包裹的响应方块网格[重复]

【英文标题】：Grid of responsive squares wrapped by a container [duplicate]

【发布时间】：2015-05-30 18:12:14

【问题描述】：

我正在尝试创建一个没有 js 的响应式正方形网格。我遇到了这个很棒的解决方案：

Grid of responsive squares

现在我正在尝试将该网格放入容器 div 中，以便每个方块的宽度/高度将来自容器的宽度/高度 - 没有运气 - 方块似乎溢出容器，因为可以在这里看到：

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

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

我错过了什么？

【问题讨论】：

您希望容器因内容而变大，还是相反？

如果容器的高度固定为 500 像素，它们是基于百分比的，您希望它们如何从容器中派生？

我希望能够改变容器大小，然后方块大小会自动改变。

@NirSmadar 如果您从链接到的答案中了解了它的工作方式，您会发现它完全基于容器的宽度。

@BrunoToffolo 这只是一个简单粗暴的例子——事实上容器也应该是基于百分比的。但是，我仍然不明白为什么这很重要——如果容器有特定的大小，基于百分比的正方形应该相应地适应——还是我错了？

【参考方案1】：

如果我正确理解您的问题，html 不够智能，无法让一个 div 看另一个 div 并具有相同的高度。当我需要做同样的事情时，我使用了像 Match Height 这样的 javascript。然后让您的 div（具有“方形”类）具有与您引用脚本相同的高度：

<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 */
    );
);

祝你好运。