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

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'; 
}