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

Question

I have a problem which may be more algebra than code, but here goes.

I need to calculate the best fit for x columns and y rows in a div of fixed proportions (say 300px x 300px). In other words, I have a div of 300px x 300px, which is the parent container of n child divs, which can be x columns by y rows.

Based on user interaction, the number of columns and the number of rows can change. Upon each interaction I need to recalculate the dimensions of the inner panels so as the ratio (1.69) remains constant and the panels make most efficient use of the available space (parent div).

I can always get the number of columns and the number of rows and can adjust the panel height and width css accordingly.

I know there is a simple algebraic calculation for this but it escapes me, and I'm no JavaScript expert. I have tried various implementations using jQuery, but I keep getting lost. I'm not asking for the exact answer - any pointers would be helpful.

Answer 1

This must be your answer:

<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>

You may check it here: http://jsfiddle.net/3fxDL/