Javascript 使用预定义的父级宽度和水平滚动在同一行上动态生成的div

我有以下问题：

我有一个表格可以上传一些图片。上传完后，我想用一个水平滚动条将他们的thumnail显示成一个宽200px的div。当到达我的div的宽度时，thumnail进入下一行

谁能帮帮我

JS

HTML

---

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

white-space:nowrap;

从.frame中删除

float:left

，并将其显示为：inline block或inline，以便所有帧都可以显示在一行上

旁注：因为会有多个图像，所以不应该使用id“img”和css选择器#img。

---

而是使用

.frame>img

或在图像元素上定义一个类。

Internet Explorer 8及更早版本不支持SetAttribute方法

您可以使用：

frame.style.whiteSpace="nowrap";

---

在脚本中。

检查我的更新答案。您还应该使用overflow-x auto而不是scroll，这样滚动条只在需要时才会显示。非常感谢！就这样！谁说了IE8及以上版本？而且，你的说法是不正确的。IE 8及以上版本不支持setAttribute。但是，在IE7及更早版本中，setAttribute不能用于设置样式属性。作为将来的参考，不要使用w3schools。他们把这个（以及其他许多事情）搞错了。这里有一个更好的资源：感谢您的输入，从现在起我们将使用quirksmode.org。

#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%;
    }

white-space:nowrap;

frame.style.whiteSpace="nowrap";