集装箱水平排列

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

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

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

Answer 4

问题是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 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;