Question

我有一个容器，里面有n个div。我需要容器根据它的孩子调整大小。我知道这可以使用jquery库完成，如下所示。

JQuery的

$(document).ready(function(){
    setContainerWidth();
});

$(window).resize(function(){
   setContainerWidth();
});

function setContainerWidth()
{
    $('.container').css('width', 'auto'); //reset
    var windowWidth = $(document).width();
    var blockWidth = $('.block').outerWidth(true);
    var maxBoxPerRow = Math.floor(windowWidth / blockWidth);
    $('.container').width(maxBoxPerRow * blockWidth);
}

这次我需要使用纯JavaScript来解决一些插件问题。我将代码分解为如下并且卡在中间，任何帮助都会受到赞赏。

的Javascript

function setContainerWidth(){
    var container_width = document.getElementById('container').offsetWidth;
    var width = document.body.clientWidth
    var block_width = document.getElementsByClassName("block").offsetWidth;

    container.style.width = "auto"
    var maxBoxPerRow = Math.floor(width / block_width)
    container.offsetWidth(maxBoxPerRow * block_width)
}

Example one using jquery

Example two using javascript

Answer 1

您遗漏了纯粹的javascript翻译中的一些内容：

function setContainerWidth()
{
    var container = document.getElementById('container');
    container.style.width = "auto";
    var window_width = window.innerWidth;
    var block_width = document.getElementsByClassName("block")[0].offsetWidth;
    var maxBoxPerRow = Math.floor(window_width / block_width);
    container.style.width = (maxBoxPerRow * block_width) + 'px';
}

如何设置容器宽度计算其子项的宽度

1 个答案: