避免在新行上显示几个div（IE11）

Question

用户可以保存列表中的一些图片，这些图片将存储在包含已保存图片缩略图的div中。我动态调整包含div的大小，使其足够大，以包含所有缩略图。只要我使用img标记来包含缩略图，一切正常，如下面的屏幕截图所示：

我用来构建div的代码：

currentPictures.innerHTML += "<img class='preview' id='spic" + picId + "' " +
            "onclick='showImageOnCanvas(\"" + sourceImg + "\", " + picId + ")' " + 
            "oncontextmenu='removeSavedPicture(\"spic" + picId + "\");' " + 
            "src='" + sourceImg + "'> ";

css的

.preview：

.preview {
    cursor: pointer;
    width: 80px;
    height: 54px;
    border: black 2px solid;
}

这是包含css的{​​{1}}（其中一些值会根据保存的缩略图数量以编程方式更改）：

div

}

现在我想将#currentPictures { margin: auto; position: absolute; top: 38px; left: 300px; width: 300px; height: 320px; z-index: 16; background-color: #DDDDDD; border: 1px solid #999999; padding: 16px 16px 16px 16px; border-radius: 6px; font-family: arial; text-align: center; vertical-align: middle; font-size: 12px; display: none; overflow-y: none; overflow-x: scroll; -ms-user-select: none; 放在img中，以便为图片添加一些文字。问题是，只要我将div包裹在img中，div就会被堆叠而不会彼此相邻，如此屏幕截图所示：

代码：

div

我尝试在div上使用不同的显示样式但没有成功。

我很确定我错过了一些明显的东西。谢谢！