html - 水平滚动的网站内容

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%，它就会向下移动到下一行。