Question

我希望卡片排成三排，这样当第四张卡片添加后，它将从第一张卡片下面开始。我尝试了许多不成功的方法，请问我该怎么做？

这就是我现在所拥有的

这就是我希望它安排

的方式

这是我的代码

 function gotData(data) {
  var jobs = data.val();
  var keys = Object.keys(jobs);

var container = document.getElementById('jobsContainer');
for (var i = 0; i<keys.length; i++) {
var k = keys[i];
var newCard = `
<div class ="container">
<div class="row" id='Card'>
<article class="col-md-4" >
  <div class="cards"><span class="glyphicon glyphicon-flash icon"></span>
    <hr class="divider"/>
    <h2 class="title" id="jobTitle" class="modal-close" onclick="jobDetail();">`+ jobs[k].JobTitle + `</h2>
    <div class="info">
      <hr class="divider"/>
      <p class="lead"><Strong>`+ jobs[k].JobSummary + `</strong></p><a class="btn btn-lg center-block" onclick="location.href = 'Specialistscard.html';">Specialists</a>
    </div>
  </div>
  <br><br>
</article>
</div>
</div>`;
    container.innerHTML += newCard;



}

Answer 1

我会使用flexbox而不是Bootstrap。您可以使用Bootstrap执行相同操作，但如果您的卡高度不同，您将很难。

查看此flexbox demo。我建议使用这个优秀的flexbox guide from CSS Tricks获取更多信息。

此外，您的循环中有整个<div class="row">。您应该只有<article>。

<强> HTML

<div class="grid">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

<强> CSS

.grid {
  display: flex;
  flex-wrap: wrap;
}

.card {
  width: calc(100%/3 - 20px);
  height: 300px;
  margin: 10px;
  background-color: #eee;
}

Answer 2

包含要水平放置的项目的主容器（例如第一个，第二个和最后一个）应该在css中具有此类属性：

display: flex;
flex-wrap: wrap;
flex-direction: row;

Answer 3

问题是for循环重复container和row，并且只能重复col-md-4。所以你要改变这样的代码..

function gotData(data) {
     var jobs = JSON.parse(data.val());
     var keys = Object.keys(jobs);

     var container = document.getElementById('jobsContainer');
     container.innerHTML += `<div class="row" id='Card'>`;
     for (var i = 0; i<keys.length; i++) {
         var k = keys[i];
         var newCard = '<article class="col-md-4"><div class="well">'+k+'</div></article>';
         container.innerHTML += newCard;
    }
    container.innerHTML += `</div>`;
}

演示：http://www.codeply.com/go/sVucS0OVVQ

Answer 4

这是解决方案：从div制作article并放置你的for循环中出现<div class ="container"> <div class="row" id='Card'>。例： <div class="container" <div class="row" id="Card" for (var i = 0; i<keys.length; i++) .....

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class ="container">
  <div class="row" id='Card'>
    <div class="col-md-4" >
      <div class="cards"><span class="glyphicon glyphicon-flash icon"></span>
        <hr class="divider"/>
        <h2 class="title" id="jobTitle" class="modal-close" onclick="jobDetail();">`+ jobs[k].JobTitle + `    </h2>
        <div class="info">
        <hr class="divider"/>
        <p class="lead"><Strong>`+ jobs[k].JobSummary + `</strong></p><a class="btn btn-lg center-block" onclick="location.href = 'Specialistscard.html';">Specialists</a>
        </div>
      </div>
    </div>
    <div class="col-md-4" >
      <div class="cards"><span class="glyphicon glyphicon-flash icon"></span>
        <hr class="divider"/>
        <h2 class="title" id="jobTitle" class="modal-close" onclick="jobDetail();">`+ jobs[k].JobTitle + `    </h2>
        <div class="info">
        <hr class="divider"/>
        <p class="lead"><Strong>`+ jobs[k].JobSummary + `</strong></p><a class="btn btn-lg center-block" onclick="location.href = 'Specialistscard.html';">Specialists</a>
        </div>
      </div>
    </div>
    <div class="col-md-4" >
      <div class="cards"><span class="glyphicon glyphicon-flash icon"></span>
        <hr class="divider"/>
        <h2 class="title" id="jobTitle" class="modal-close" onclick="jobDetail();">`+ jobs[k].JobTitle + `    </h2>
        <div class="info">
        <hr class="divider"/>
        <p class="lead"><Strong>`+ jobs[k].JobSummary + `</strong></p><a class="btn btn-lg center-block" onclick="location.href = 'Specialistscard.html';">Specialists</a>
        </div>
      </div>
    </div>
  </div>
</div>`;

＆＃13;

Answer 5

这是另一个解决方案：

function gotData(data) {
  var jobs = data.val();
  var keys = Object.keys(jobs);

var container = document.getElementById('jobsContainer');
var conthead = '<div class ="container">';
var rowhead = '<div class="row" id="Card">';
var enddiv = '</div>';
container.innerHTML += conthead;
container.innerHTML += rowhead;

for (var i = 0; i<keys.length; i++) {
var k = keys[i];
var newCard = `
<article class="col-md-4" >
  <div class="cards"><span class="glyphicon glyphicon-flash icon"></span>
    <hr class="divider"/>
    <h2 class="title" id="jobTitle" class="modal-close" onclick="jobDetail();">`+ jobs[k].JobTitle + `</h2>
    <div class="info">
      <hr class="divider"/>
      <p class="lead"><Strong>`+ jobs[k].JobSummary + `</strong></p><a class="btn btn-lg center-block" onclick="location.href = 'Specialistscard.html';">Specialists</a>
    </div>
  </div>
  <br><br>
</article>`;
container.innerHTML += newCard;
if (((i+1)%3 === 0) && ((i+1) != length)) {
  container.innerHTML += enddiv;
  container.innerHTML += rowhead;
}
}
container.innerHTML += enddiv;
container.innerHTML += enddiv;

容器的水平排列

5 个答案: