Question

我在div中有很多图像，目的是让它们水平排列，并让用户能够向左/向右滑动以平移图像，如幻灯片。

div有一个设置的宽度/高度，我设置了overflow-x：auto，我设置了display：inline等等。

我尝试了div和图像的浮点数和显示值的各种组合。我四处寻找答案并尝试了一堆，但似乎都没有。

我之前在表格中有图像的情况下已经完成了，但是我觉得必须有更简单的方法才能通过CSS完成它。

右？

编辑：根据要求，这是我的代码。

首先，我找到原始div并清除它，然后创建将保存图像的div。然后我拿“car”，这是一个传递给函数的JSON对象，它是“images”键（它是一个图像数组），并将每个图像附加到imgSlides div。

这是我的JavaScript：

var div = document.getElementById("detailsDiv");
div.innerHTML = "";

var imgSlides = document.createElement('div');
imgSlides.setAttribute('class', 'imgSlides');
for(var i=0; i<car.images.data.length; i++){
    var img = document.createElement('img');
    var url = car.images.data[i].image_url;
    img.setAttribute('src', url);
    imgSlides.appendChild(img);
}
div.appendChild(imgSlides);

这是我的CSS：

#detailsDiv .imgSlides{
width:55%;
height: 55%;
overflow-x:scroll;
overflow-y:hidden;
display:inline;
}
#detailsDiv .imgSlides img{
width:90%;
height:auto;
display:inline;
float:left;
}

非常感谢任何帮助

丹

HTML / CSS - Div内部图像的水平滚动

0 个答案: