Горизонтальное расположение контейнеров

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

Проблема заключается в том, что цикл повторяется 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 и поставить <div class ="container"> <div class="row" id='Card'> из вашего для петли. пример: <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 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;