并排对齐图像上传预览

Posted 2023-05-08

【中文标题】并排对齐图像上传预览

【英文标题】：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);

【参考方案1】：

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

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

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

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

html

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

CSS

div 
    text-align: justify;


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


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