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。

动态创建的卡片垂直排列，应该水平放置

1 个答案: