让三张图像彼此相邻显示

Question

我知道这个问题已被问了一百次，但我似乎无法找到一个适用于任何其他线程的答案。我正在显示图像，并希望其中三个成像，但它们都在彼此之下。

//displaying  multiple images and delete them 

const deleteFiles = [];

$("#file-upload").on("change", function(event) {
    const files = event.originalEvent.target.files;
    const fragmentElement = document.createDocumentFragment();
    const galleryElement = document.querySelector('div.gallery');

    if (galleryElement === null) {
        return
    }

    for (let i = 0; i < files.length; i++) {
        const file = files[i];

        deleteFiles.push(file);

        const deleteImg = document.createElement("div");
        const deleteimage = document.createElement("img");
        const faGlyph = document.createElement('i');

        faGlyph.className = 'fas fa-times';
        deleteImg.className = 'thumbnail-container';
        deleteimage.className = 'thumbnail';
        faGlyph.style.display = 'none';
        deleteImg.appendChild(deleteimage);
        deleteImg.appendChild(faGlyph);
        fragmentElement.appendChild(deleteImg);
        deleteimage.src = URL.createObjectURL(file);

        function toggleGlyph() {
            var jqGlyph = $(faGlyph);

            if (jqGlyph.is(':visible')) {
                jqGlyph.hide();
            } else {
                jqGlyph.show();
            }
        }

        function deletePic() {
            const index = deleteFiles.indexOf(file);

            if (index !== -1) {
                deleteFiles.splice(index, 1);
            }

            URL.revokeObjectURL(file);
            deleteImg.parentElement.removeChild(deleteImg);
        }

        $(deleteImg).hover(toggleGlyph, toggleGlyph);
        faGlyph.addEventListener('click', deletePic, false);
    }

    galleryElement.appendChild(fragmentElement);
    $('div.gallery').show();
});

.form {
overflow: hidden;
}

/*upload image */
.gallery  img{
display:inline-block;
position: relative;
width:  230px;
height: 210px;
padding-right:7%;
padding-bottom: 6%;
box-sizing: content-box; 
}

.gallery{
border-style: dashed;
border-width: 2px;
color: #5967b9;
padding: 10%;
}

div.gallery { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="Form1" method="post" role="form" class="form" enctype="multipart/form-data">

        <label> <input type="text" id="albumname" name="albumname" class="form-control" placeholder="Album Name" required autofocus> </label>

        <div class="input-group">

            <label for="file-upload" class="custom-file-upload">
                <i class="fa fa-cloud-upload" id="choosefiles"></i> Choose Files...
            </label>
 `          <input id="file-upload" type="file" multiple/>          
        </div> 

        <div class="gallery"></div>
        <button class="btn btn-lg block btn-primary btn-block btn-signin-upload" type="submit" id="buttonForm">Upload</button>
    </form>

真的不确定问题是什么，但我会感激任何帮助。谢谢