Question

我有一个代码，根据我的数据填充div，这是我的代码。

<!DOCTYPE html>
<html>

<head>
  <style>
    .card {
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
      transition: 0.3s;
      width: 40%;
      height: 180px;
    }
    
    .card:hover {
      box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    }
    
    .container {
      padding: 2px 16px;
    }
  </style>
</head>

<body onLoad="LoadAllData()">

  <div id="maincontainer" class="maincontainer">
  </div>

  <script>
    function LoadAllData() {
      google.script.run.withSuccessHandler(GenerateMainTable).getData();
    }

    function GenerateMainTable(data) {
      var createcard = document.getElementById("maincontainer");

      for (var i = 1; i < data.length; i++) {

        var imagelink = data[i][0]
        //alert(data[i][0]);
        createcard.innerHTML += '<div class="container">' +
          '<div class="card">' +
          imagelink +
          '</div>' +
          '</div>';
      }
    }
  </script>

</body>

</html>

这段代码正常工作，它在我的问题中一直创建一个div是如何从左到右填充div等等。喜欢这个

Answer 1

您可以使用CSS样式 -

  .yourPopulatedDiv{
     display:inline-block;
     float:left;
  }

在poppulated div中尝试这种风格可能会解决您的问题。

在你的情况下 -

.card {
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
      transition: 0.3s;
      width: 40%;
      height: 180px;
      display:inline-block;
      float:left;
      margin-left:10px;
    }

Answer 2

将你的容器div放在循环之外。

'<div class="container">'

然后为容器添加css类，如

.container {
    display:inline-block;
    float:left;
}

您的功能看起来像

function GenerateMainTable(data) {
  var createcard = document.getElementById("maincontainer");
  createcard.innerHTML += '<div class="container">' 

  for (var i = 1; i < data.length; i++) {

    var imagelink = data[i][0]
    createcard.innerHTML += '<div class="card">' + imagelink + '</div>';

  }
  createcard.innerHTML += '</div>';
}

Answer 3

我认为这就是你所需要的。

    .card {
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
          transition: 0.3s;
          width: 40%;
          height: 180px;
          float:left;
          margin: 2px; //For Adding space between divs
        }

        .card:hover {
          box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
        }

        .container {
          padding: 2px 16px;

        }

Answer 4

如果我理解正确，你是否希望按照父母的宽度在一行上从左到右显示div。如果是，那么请尝试将子元素浮动到“float：left”并使用：100％。记得给父母一个固定的宽度。

此致 Sijo Jose

从左到右填充Div

4 个答案: