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

Question

好的，所以我正在使用 W3School 的图片库模板制作一个项目库。我是先从移动设备开始制作的，因此尺寸最适合 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

您有 2 个选择。

您的 5 section-projects-thumbnail-col 向左浮动，宽度为 40%，容器的宽度为 window 的 100%。明显空间不够

如果你想让它以这种方式工作，你必须设置你的容器：section-projects-thumbnail-row 200% 宽度 (40% * 5) 并且你所有的 col 都会表现得像你想要的那样使用 box-sizing: border-box;，这样填充和边距不会占用超过 40% 的空间。

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

祝你项目顺利。

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

Overflow of div is expanding in y-direction, but need it in the x-direction with scroll

html

css

containers

overflow