我有以下问题:
我有一个可以上传一些图片的表单。上传它们后,我想将它们的缩略图显示到宽度为 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%;
}
最佳答案
您需要在 div 中禁用换行。将此样式添加到 #photos css。
white-space:nowrap;
从 .frame 中删除 float:left
并使其显示:inline-block 或 inline 以便所有帧都可以显示在一行上。
旁注:因为会有多个图像,所以你不应该使用 id "img"和 css 选择器 #img。
而是使用 .frame > img
或在图像元素上定义一个类。
关于javascript - 在具有预定义的父宽度和水平滚动的同一行上动态生成的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23718890/