水平滚动网站内容

Question

我的目标是为我的作品集制作一个网站。 我有一个用于菜单的 div，它希望位于另一个 div 之上，该 div 用作我所有图像的容器。图像必须填充浏览器的 100% 高度。 问题是，我希望我的网站水平滚动，当我开始添加内容时，一旦宽度超过浏览器窗口的 100%，新图像就会位于第一个图像下方，使其水平滚动。

我能做些什么来纠正这个问题？

CSS

body, html {
    height: 100%;
}

#main {
    width: 100%;
    height: 100%;
    background-color: #000;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
}

#menu {
    width: 200px;
    height: 500px;
    background-color: #fff;
    position: absolute;
    top: 10px;
    left: 10px;
    overflow: scroll;
    z-index: 2;
}

#img {
    height: 100%;
    float: left;
    overflow: scroll;
}

Answer 1

从#main 标记中删除宽度。一旦一个元素达到 100%，它就会向下移动到下一行。