html - DIV 高度基于容器内许多元素的宽度

Question

我在一个容器盒（和 10 个容器）中有一组 70 个方形 div 元素。我想在每个第 7 个 div 元素处设置一个断点，所以我最终得到 10 行，每行 7 个 div。正方形的边距应该很薄。我已将元素宽度设置为 13.68571428571429%，将其余部分保留为边距。

我怎样才能实现高度调整到宽度，所以我总是得到 7 个正方形，宽度和高度基于百分比相等？

尝试过 Javascript，但它渲染的时间太长，有 700 个方块。Flexbox 似乎只在较新的浏览器上兼容（我们仍然有相当数量的用户在较旧的浏览器上）。

这是我的html：

            <div class="wrapper">                   
                <div data-ng-repeat="square in [] | rangeFilter:1:70">
                    <div dir-square current-wrapper="{{wid}}" current-square="{{sid}}" class="square">
                        {{square}}
                    </div>
                    <div class="clearfix" ng-show="square % ctrl.Breakpoint == 0"></div>
                </div>      
            </div>

Answer 1

如果您为容器设置了断点（宽度不会改变）。我建议您事先计算 px 并使用媒体查询进行设置。如果这是不可能的（您使用的是流体容器），那么您将需要使用 js。如果您发布您拥有的 javascript 代码，则可能有一些方法可以对其进行优化。