Question

我正在使用API从零售商的网站上请求特定类型的钱包。然后我格式化了JSON数据，以便显示钱包图像和钱包名称。但是，它垂直显示，每行一个钱包。我想在电子商务网站中看到这些项目彼此相邻。我该怎么做/下面是我的代码。出于隐私目的，我没有包含我的API密钥。提前谢谢。

$(document).ready(function(){
		//make HTTP request
        $.get("http://api.vsapi01.com/search/by-url?apikey=[insert key here]0&url=https://product-images4.therealreal.com/BAL31068_2_product.jpg&index=real-bags ", function(data){
               
         	data['images'].forEach(function(image,index,images) { 
            var bagName = image.title;
           
            var clickURL = image.pageUrl;
            var pictureURL = image.imageUrl;
  			var image = "<img src=\""+pictureURL+"\"/>";
            var clickableImage = "<a href=\"" + clickURL + "\">" + image + "</a>";
            var wholeImage = "<div>"  + clickableImage + "<br>" + bagName + "<br> " + "<div>";                      
            $( ".display" ).append(wholeImage);
            });
       	});
     });

<div class="display"></div>

Answer 1

Sam在评论中提到，display的{{1}}属性应设为.display：

inline-block

<强>解释

这是因为.display { display: inline-block }元素（默认情况下是块元素）将始终移动到最后一个块之后的下一行。将元素设置为div将保留块元素的所有属性，但允许同一行上的多个块。

进一步阅读

CSS Display Property at MDN

如何横向显示格式化的JSON数据，类似于电子商务网站？

1 个答案: