javascript - 动态创建的卡片垂直排列它应该是水平的

Question

我正在尝试动态创建卡片，但是当我创建卡片时，它们是垂直排列的。我需要它们水平排列。

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

Answer 1

您应该能够为卡片创建一个简单的 CSS 类。 Here is an example我如何假设您的 templateString 将在浏览器中呈现。您可以看到卡片现在是如何水平堆叠的。

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

更进一步，我会考虑使用 Bootstrap grid如果您想要响应式布局。