Javascript 从左到右填充Div

我有一个基于数据数量填充div的代码，下面是我的代码

.卡片{
盒影：0 4px 8px 0 rgba（0,0,0,0.2）；
过渡：0.3s；
宽度：40%；
高度：180像素；
}
.卡：悬停{
盒影：0 8px 16px 0 rgba（0,0,0,0.2）；
}
.集装箱{
填充：2x16px；
}
函数LoadAllData（）{
google.script.run.withSuccessHandler（GenerateMainable）.getData（）；
}
函数生成器可维护（数据）{
var createcard=document.getElementById（“主容器”）；
对于（变量i=1；i

我想这就是你需要的

    .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;

        }

---

我想这就是你需要的

    .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;

        }

---

您可以为此使用

CSS

样式-

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

在您的

poppulateddiv

中尝试这种风格，它可能会解决您的问题

就你而言-

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

---

您可以为此使用

CSS

样式-

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

在您的

poppulateddiv

中尝试这种风格，它可能会解决您的问题

就你而言-

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

---

如果我理解正确的话，您是否希望在一行上按照父行的宽度从左到右显示div。如果是，请尝试将子元素浮动到“float:left”并使用：100%。记住给父对象指定一个固定的宽度

问候,，

---

Sijo Jose

如果我理解正确，您是否希望在一条直线上按照其父对象的宽度从左向右显示div。如果是，请尝试将子元素浮动到“float:left”并使用：100%。记住给父对象指定一个固定的宽度

问候,，

---

Sijo Jose

将您的容器div移出循环

'<div class="container">'

你的函数看起来像

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

函数生成器维护（数据）{
var createcard=document.getElementById（“主容器”）；
createcard.innerHTML+=“”
对于（变量i=1；i

将容器div置于循环之外

'<div class="container">'

你的函数看起来像

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

函数生成器维护（数据）{
var createcard=document.getElementById（“主容器”）；
createcard.innerHTML+=“”
对于（变量i=1；i

从左到右到底是什么意思？请解释“从左到右”？您可以将CSS属性float:left添加到容器div或卡片div中，我的意思是填充div，它将从左到右开始，就像卡片样式一样。@paulpagente试试我的答案，它将解决此问题。您到底是什么意思从左到右？请解释“从左到右”？您可以将CSS属性float:left添加到容器div或卡片div我的意思是，它将从左到右开始，就像卡片样式一样。@paulpagente尝试我的答案，它将解决此问题我尝试了您的代码。您能在div之间创建空格吗？@paulpagente我已经为您更新了我的代码。检查一下，我已经用了

左边距：10px

作为空格，如果你愿意，你也可以在里面用

%

。如果它是有用的答案，泰。。！tysm先生：）加上1我试过你的密码。您能在div之间创建空格吗？@paulpagente我已经为您更新了我的代码。检查一下，我已经用了

左边距：10px

作为空格，如果你愿意，你也可以在里面用

%

。如果它是有用的答案，泰。。！先生：）加1