Карточки, созданные динамически, располагаются вертикально, они должны быть горизонтальными

Я пытаюсь создать карту динамически, но когда я создаю карты, они располагаются вертикально. Мне нужно, чтобы они располагались по горизонтали.

function _getall() {
  $.ajax({
    url: 'http://localhost:8888/books1/getall',
    type: 'GET',    
    dataType:'json',
    success: function(data) {          
      var templateString = '';
      $.each(data, function(i, item) {
       templateString = '<div class="card"><div class="container"> 
        <h4><b>'+item.name+'</b></h4><p>'+item.description+'</p><h4>'
         + item.author+'</h4><h4>' + item.price+'</h4><h4>'
         + item.release_date+'</h4><button class="button" 
           onclick="_deleteBook('+item.id+')">Delete</button>'
         + '<a href="http://localhost:8888/updatebook"><button 
         class="button" onclick="_update('+item.id+')">Update</button></a> 
         </div> 
         </div>'; 
         $('#test').append(templateString);
       })   
     },
     error: function(request, error) {
       alert("Request: " + JSON.stringify(request));
     }
   });

Этот код вообще работает? Похоже, у вас несколько проблем с синтаксисом.

Rory McCrossan 31.10.2018 11:47

Если вы хотите, чтобы элементы div отображались рядом, используйте display: inline-block

Rory McCrossan 31.10.2018 11:49

Если вы используете бутстрап, вы можете проверить их документацию о картах (то, что они показывают в качестве примера, создает сетку), в противном случае, как упоминал @RoryMcCrossan, вам просто нужно стилизовать их в соответствии с тем, что вы хотите.

D.V.D. 31.10.2018 11:51

Будем надеяться, что вы хотите, чтобы templateString отображался на всю страницу, а затем используйте <div class="col-md-12">.

Vpa 31.10.2018 11:58
0
4
435
1

Ответы 1

Вы должны иметь возможность создать простой класс css для своих карточек. Вот пример того, как я предполагаю, что ваша templateString будет отображаться в браузере. Вы можете увидеть, как ваши карты теперь складываются по горизонтали.

.card {
  border: 1px solid #000;
  display: inline-block;
  padding: 20px;
  margin: 5px;
}

Сделав еще один шаг, я бы подумал об использовании Сетка бутстрапа, если вам нужен адаптивный макет.

Другие вопросы по теме