div的溢出在y方向扩展，但需要在x方向滚动

Question

好的，所以我正在使用 W3Schools 的图片库模板制作一个项目库。我是从移动优先制作这个的，所以尺寸最适合 iPhone 5-ish。

所以我做到了，但是缩略图容器的溢出在 y 方向扩展，但我希望这个容器扩展到 x 方向并使其可滚动。

这是一个 jsfiddle：https://jsfiddle.net/6chv3kry/2/。请注意，这很不完整，但在页面底部应该可以看到带有alt 标记的缩略图。

我尝试将section-projects-thumbnail-row 更改为flex 显示，但这不起作用。是否可能是由于尺寸的原因，如果是这样，我该如何更改它以使其正常工作...谢谢！

以下是相关代码：

.html

<!-- Thumbnail images -->
        <div class="section-projects-thumbnail-row">
            <div class="section-projects-thumbnail-col">
                <img class="section-projects-thumbnail-img cursor" src="tree.jfif"  onclick="currentSlide(1)" alt="The Woods">
                <h3 class="section-projects-thumbnail-title">Project Title 1</h3>
                <h4 class="section-projects-thumbnail-date">21/69/4200</h4>
            </div>
            <div class="section-projects-thumbnail-col">
                <img class="section-projects-thumbnail-img cursor" src="tree2.jfif"  onclick="currentSlide(2)" alt="Cinque Terre">
                <h3 class="section-projects-thumbnail-title">Project Title 2</h3>
                <h4 class="section-projects-thumbnail-date">21/69/4200</h4>
            </div>
            <div class="section-projects-thumbnail-col">
                <img class="section-projects-thumbnail-img cursor" src="tress.jfif"  onclick="currentSlide(3)" alt="Mountains and fjords">
                <h3 class="section-projects-thumbnail-title">Project Title 3</h3>
                <h4 class="section-projects-thumbnail-date">21/69/4200</h4>
            </div>
            <div class="section-projects-thumbnail-col">
                <img class="section-projects-thumbnail-img cursor" src="Ltree.jfif"  onclick="currentSlide(4)" alt="Northern Lights">
                <h3 class="section-projects-thumbnail-title">Project Title 4</h3>
                <h4 class="section-projects-thumbnail-date">21/69/4200</h4>
            </div>
            <div class="section-projects-thumbnail-col">
                <img class="section-projects-thumbnail-img cursor" src="Rtree.jfif"  onclick="currentSlide(5)" alt="Nature and sunrise">
                <h3 class="section-projects-thumbnail-title">Project Title 5</h3>
                <h4 class="section-projects-thumbnail-date">21/69/4200</h4>
            </div>
            <div class="section-projects-thumbnail-col">
                <img class="section-projects-thumbnail-img cursor" src="ytree.jpg"  onclick="currentSlide(6)" alt="Snowy Mountains">
                <h3 class="section-projects-thumbnail-title">Project Title 6</h3>
                <h4 class="section-projects-thumbnail-date">21/69/4200</h4>
            </div>
        </div>

.css：

body, html {
            max-width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            border: 0;
            overflow-x: hidden;
        }


        .section-projects-thumbnail-row{
            
            position: absolute;
            top: 70%;
            height: 20%;
            width: 100%;
            overflow-x: scroll;
        }

        

        /* Six columns side by side */
        .section-projects-thumbnail-col {
            float: left;
            width: 40%;
            height: 100%;
            margin: 2%;
        }

        /* Add a transparency effect for thumnbail images */
        .section-projects-thumbnail-img {
            display: block;
            width: 100%;
            height: 78%;
            opacity: 0.6;
        }

Answer 1

你有两个选择。

您的 5 section-projects-thumbnail-col 向左浮动，宽度为 40%，容器宽度为窗口的 100%。显然没有足够的空间。

如果你想让它以这种方式工作，你必须设置你的容器：section-projects-thumbnail-row 200% 宽度 (40% * 5) 并且你所有的 col 都会表现出你想要的行为，假设你使用 box-sizing: border-box; 所以填充并且利润不会超过 40%。

第二个选项可能不使用float，将您的col 设置为display:inline-block并添加到容器white-space: nowrap;。如果内容是动态的，这将是一个更好的选择，因此它可以使用 5、6 或您想要的任意数量的元素。

祝你的项目好运。