javascript - 如何拥有一个包含多个 div 的 div 可能 4-6-8 我如何使用 Jquery 在页面加载时调整它们

Question

如何让一个包含多个 div 的 div 可能 4-6-8 我如何使用 Jquery 在页面加载时调整它们。

<div id="main">
 <div class="box"></div>
 <div class="box"></div>
 <div class="box"></div>
 <div class="box"></div>
</div>

我想创建一个 jquery 函数，它可以通过在页面加载时限制子 div 的高度和宽度来使子 div 适应父 div。

Answer 1

我要试一试，希望我认为您想要的是您实际上想要的。我假设您想插入一个动态数字 <div class="box">元素进入<div id="main">页面加载时的元素。如果是这样，这应该有效:

HTML

<div id="main"></div>

jQuery

function createBoxes(numberOfBoxes) {
    var $box = $('<div/>').addClass('box');
    var $container = $('#main');
    for(var i = 1; i <= numberOfBoxes; i++) {
        $container.append($box.clone().text(i));   
    }
}

$(function() { // calls createBoxes() when the DOM is ready
               // shortened version of $(document).ready(function() {
    createBoxes(4);
});

DEMO