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

好的，我正在用W3Schools的图像库模板制作一个项目库。我是从手机开始制作的，所以尺寸最适合iPhone 5-ish

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

下面是一个JSFIDLE:。注意这是非常不完整的，但是缩略图应该在页面底部的

alt

标记处可见

我已尝试将

部分项目缩略图行的显示更改为
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>

你有两个选择

您的5个
分区项目将以40%的宽度向左浮动，容器的宽度为窗口的100%。显然没有足够的空间

如果你想让它这样工作，你必须设置你的容器：
section项目缩略图行
200%宽度（40%*5），你所有的
col
都会表现出你想要的行为，因为你使用了
框大小：边框框因此填充和边距占用的空间不会超过40%

第二个选项不能使用
float
，将
col
设置为
display:inline block
，并添加到容器
空白：nowrap。如果内容是dinamic，那么这将是一个更好的选择，因此它将使用5、6或您想要的任意多的元素

祝你的项目好运。
嘿，伙计，我尝试使用选项2，因为它最适合动态内容（如你所述），但当我尝试添加
display:inline block到子级和
空白：nowrap对于父级，它不起作用。也许我把它们放错地方了？？你能解释一下我做错了什么吗？当我检查元素并检查它时，我在
-col
元素的右侧有一个很大的空白，不可编辑。它可能不起作用，因为你正在通过javascript向所有col添加display:block。。所以它忽略了css显示：inline块。删除或添加重要的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;
        }