javascript - 在具有预定义的父宽度和水平滚动的同一行上动态生成的 div

Question

我有以下问题:

我有一个可以上传一些图片的表单。上传它们后，我想将它们的缩略图显示到宽度为 200px 的 div 中，并带有水平滚动条。当达到我的 div 的宽度时，缩略图会转到下一行。

谁能帮帮我!

JS

function updatepic(pic) {
             var photos = document.querySelector("#photos");

             var frame = document.createElement("DIV");
             frame.setAttribute("class" , "frame");
             photos.appendChild(frame);

             var img = document.createElement("IMG");
             img.setAttribute("id" , "img");             
             img.setAttribute("src" , pic);          
             frame.appendChild(img);        

        }

HTML

<form id="form" action="upload.php" method="post" enctype="multipart/form-data" target="iframe">
        Choose U're file!
        <input id="file" name="file" type="file"> </input>      
        <br/>
        <input id="submit" name="submit" type="submit" value="UPLOAD"></input>

</form>


        <div id="photos"></div>

CSS

#photos {
        display:inline-block;       
        position: absolute;
        top: 35%;
        width: 200px;
        height: 100px;
        border: 2px solid black;
        overflow-x: scroll;
        overflow-y : hidden;        
    }

.frame {

        float: left;        
        margin-top: 3%;
        margin-left: 2%;        
        max-height: 80%;        
        border: 2px solid black;
        background-color: black;
    }


    #img {
        display: inline;
        max-width: 100%;
        max-height: 80%;
    }

Answer 1

您需要在 div 中禁用换行。将此样式添加到 #photos css。

white-space:nowrap;

从 .frame 中删除 float:left 并使其显示:inline-block 或 inline 以便所有帧都可以显示在一行上。

旁注:因为会有多个图像，所以你不应该使用 id "img"和 css 选择器 #img。而是使用 .frame > img 或在图像元素上定义一个类。