如何水平显示我格式化的JSON数据，类似于电子商务网站

How can I display my formatted JSON data horizontally, similar to an ecommerce site?

本文关键字：数据 JSON 类似于 商务网站 格式化 何水平 水平 显示      更新时间：2023-09-26

我正在与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>

就像Sam在评论中提到的那样，.display的display属性应该设置为inline-block:

.display {
    display: inline-block
}

解释

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

进一步阅读

MDN 处的CSS Display属性

相关文章：