并排对齐图像上传预览答案

【问题标题】：Align Image Upload preview side by side并排对齐图像上传预览
【发布时间】：2021-07-20 17:42:35
【问题描述】：

我需要帮助将我的图片上传预览排成一行（看起来像一个品牌/合作伙伴滑块）Current preview output，但我希望它排成一行。

<div class="image-gallery">
<div class="row">
    <div class="col-md-3">
        <ul class="cvf_uploaded_files">
            <li>
                <div class="user-img">
                    <input type="file" id="files" name="files[]" multiple />
                    <div>
                        <input type="file" name="upload" multiple="multiple" class="user_picked_files" />
                        <div class="green-btn-outline mx-auto mb-1"><i class="fas fa-plus"></i>
                        </div>
                        <div class="green-text small">Add Photo</div>
                    </div>
                </div>
            </li>

        </ul>
    </div>
    <div class="col" style="overflow: auto;">
        <ul class="ipl cvf_uploaded_files">

        </ul>
    </div>
</div>

  var files = this.files;
            var i = 0;

            for (i = 0; i < files.length; i++) {
                var readImg = new FileReader();
                var file = files[i];

                if (file.type.match('image.*')) {
                    storedFiles.push(file);
                    readImg.onload = (function(file) {
                        return function(e) {
                            $('.ipl').append(
                                "<li file = '" + file.name + "'>" +
                                "<img class = 'img-thumb' src = '" + e.target.result + "' />" +
                                "<a href = '#' class = 'cvf_delete_image' title = 'Cancel'><i class='fas fa-times cross'><i/></a>" +
                                "</li>"
                            );
                        };
                    })(file);
                    readImg.readAsDataURL(file);

【问题讨论】：

标签： html jquery css image upload

【解决方案1】：

现代方法：flexbox 只需将以下 CSS 添加到容器元素（此处为 div）：

div {
  display: flex;
  justify-content: space-between;
}

老办法在容器元素上使用text-align: justify;。

然后将内容拉伸到 100% 宽度

HTML

<div>
 <img src="http://placehold.it/100x100" alt=""  /> 
 <img src="http://placehold.it/100x100" alt=""  />
 <img src="http://placehold.it/100x100" alt="" />
</div>

CSS

div {
    text-align: justify;
}

div img {
    display: inline-block;
    width: 100px;
    height: 100px;
}

div:after {
    content: '';
    display: inline-block;
    width: 100%;
}

【讨论】：