JavaScript计算固定div中矩形的高度和宽度答案

【问题标题】：JavaScript calculate height & width of rectangles in fixed divJavaScript计算固定div中矩形的高度和宽度
【发布时间】：2013-06-27 21:27:39
【问题描述】：

我有一个问题，可能是代数而不是代码，但是这里解决了。

我需要在固定比例的 div（比如 300px x 300px）中计算 x 列和 y 行的最佳拟合。也就是说，我有一个 300px x 300px 的 div，它是 n 个子 div 的父容器，可以是 x 列 x y 行。

根据用户交互，列数和行数可以改变。在每次交互时，我需要重新计算内部面板的尺寸，以便比率 (1.69) 保持不变，并且面板最有效地利用可用空间（父 div）。

我总是可以得到列数和行数，并且可以相应地调整面板高度和宽度 css。

我知道对此有一个简单的代数计算，但它让我无法理解，而且我不是 JavaScript 专家。我已经尝试过使用 jQuery 的各种实现，但我一直迷路。我不是在要求确切的答案 - 任何指针都会有所帮助。

【问题讨论】：

我认为您正在寻找弹性盒。
我不明白 1.69 是什么。

标签： javascript jquery css

【解决方案1】：

这一定是你的答案：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<script>

    $(document).ready(

    function () 
    {
        $("#go_btn").click(

        function () 
        {
            var height = Math.round(300 / $("#h").val())-2;
            var width = Math.round(300 / $("#w").val())-2;
            //-2 is because of allocating space for borders.
            var div = $("<div></div>");

            $("#container").html('');

            for (i = 0; i < $("#h").val(); i++) 
            {
                for (j = 0; j < $("#w").val(); j++) 
                {
                    $("#container").append('<div style="border:1px dotted green;text-align:center;vertical-align:center;float:left;width:' + width + 'px;height:' + height + 'px;">' + i + ' x ' + j + '</div>');
                }
            }
        });
    });

</script>
<style>
#container {
    width: 300px;
    height:300px;
    border: 1px solid grey;
}


</style>
<p>Width:
    <input type="text" id="w" class="inp" />
</p>
<p>Height:
    <input type="text" id="h" class="inp" />
</p>
<p>
    <input type="button" value="Go" id="go_btn" />
</p>
<div id="container"></div>

您可以在这里查看：http://jsfiddle.net/3fxDL/

【讨论】：