时间戳

首页 > 解决方案 > div的溢出在y方向扩展，但需要在x方向滚动

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

问题描述

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

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

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

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

以下是相关代码：

.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;
        }

标签： htmlcsscontainersoverflow

解决方案

您有 2 个选项。

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

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

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

祝你的项目好运。

推荐阅读