Javascript 使div像网格一样排列，具有不同的高度 我正在研究一个项目，在这个项目中，网格是用方框打印的（可以放置图标），在网格的中间将是另一种内容的更大的框。 现在，对于网格，我有一个container div，其中有box div和更大的content div。它们的显示设置为inline block，但这并没有按照我希望的方式排列

发生这种情况：

我尝试使用砌体动态排列网格，但这只会给我带来更多的错误。如果我找不到另一个解决方案，我想我会把一组框变成黑色，让更大的content div重叠起来

有人能帮忙吗？谢谢

代码：

//用于呈现用于放置图标的网格的函数
函数renderGrid（）{
/*
用户的视口变量
*/
var user_width=$（window.width（）；
var user_height=$（window.height（）；
/* 
根据用户视口的尺寸计算要绘制的列/行数
*/
//水平计数的箱子数量
var box_水平_编号=数学地板（（用户_宽度-box_边距）/（box_宽度+box_边距））；
//垂直计数的箱子数量
var box_垂直_编号=数学地板（（用户高度-box_边距）/（box_高度+box_边距））；
//要打印的框数-删除8个，因为搜索框占用了空间！
变量框到打印框编号=（框水平编号*框垂直编号）-8；
/*
在浏览器上绘制网格容器
*/
var grid_container_string=''；
//打印网格容器
$（“body”）.append（网格\容器\字符串）；
//计算容器的宽度和高度
变量网格宽度=（方框水平编号*方框宽度）+（方框水平编号*方框边距）；
变量网格高度=（框垂直高度*框高度）+（框垂直高度*框边距）；
//将css添加到网格容器
$（“.grid容器”）.css({
“位置”：“绝对”，
“宽度”：网格宽度，
“高度”：网格高度，
“top”：“50%”，
“左”：“50%”，
“边缘顶部”：（网格高度/2），
“左边距”：（网格宽度/2），
“z指数”：“-2”
});
/*
在浏览器上绘制网格
*/
变量框_字符串=“”；
//打印方框div和google搜索框：
对于（变量i=0；i

---

编辑：添加了一些代码

你能发布你的代码吗？嗯。。。有很多代码。不过可以

//Function that renders the grid used to place the icons
function renderGrid(){
    /*
    User's viewport's vars
  */
  var user_width = $(window).width();
  var user_height = $(window).height();

    /* 
    Calculating the number of columns/rows to be drawn based on the dimensions of the user's viewport
    */

    // Number of boxes horizontally counted
    var box_horizontal_number = Math.floor( (user_width - box_margin) / (box_width + box_margin) ); 

    //Number of boxes vertically counted
    var box_vertical_number = Math.floor( (user_height - box_margin) / (box_height + box_margin) );

  //Number of boxes to print - removing 8 because of the space occupied by the search box!
  var boxes_to_print_number = (box_horizontal_number * box_vertical_number) - 8;

  /*
  Drawing the grid-container on the browser
  */
  var grid_container_string = '<div class="grid-container"></div>';

  // Printing the grid-container
  $( "body" ).append( grid_container_string );

  // Calculating the width and height of the container
  var grid_width = ( box_horizontal_number * box_width ) + ( box_horizontal_number * box_margin );
  var grid_height = ( box_vertical_number * box_height ) + ( box_vertical_number * box_margin );

  //Adding css to the grid-container
  $( ".grid-container").css({
    "position": 'absolute',
    "width": grid_width,
    "height": grid_height,
    "top": '50%',
    "left": '50%',
    "margin-top": -( grid_height / 2 ),
    "margin-left": -( grid_width / 2 ),
    "z-index": '-2'
  });

    /*
    Drawing the grid on the browser
    */

    var box_string = '<div class="box"></div>';

    // Printing the box div's and the google search box:
  for(var i = 0; i < boxes_to_print_number; i++) {
    $( ".grid-container" ).append( box_string );

    if( i == ( ( ( box_horizontal_number / 2 ) * 3 ) - 3 ) ){
      //Printing the search box in the middle of the box printing
      $( ".grid-container" ).append( grid_searchbox_string );

      $( ".google-search-container").css({
        "display": 'inline-block',
        "width": grid_searchbox_width,
        "height": grid_searchbox_height,
        "background-color": grid_searchbox_color,
        "margin": ( box_margin / 2 ) + 'px ' + ( box_margin / 2 ) + 'px ' + ( box_margin / 2 ) + 'px ' + ( box_margin / 2 ) + 'px',
        "z-index": '-1'
      });
    }
  };

  // Adding the CSS to the box div's
  $( ".box").css({
    "display": 'inline-block',
    "width": box_width,
    "height": box_height,
    "background-color": box_background_color,
    "border-radius": '5px',
    "margin": ( box_margin / 2 ) + 'px ' + ( box_margin / 2 ) + 'px ' + ( box_margin / 2 ) + 'px ' + ( box_margin / 2 ) + 'px',
    "z-index": '-1'
  });

}; // End of renderGrid();