Question

我试图创建一个图片库，并希望它在页面底部显示为水平条带，可以从左向右滚动以查看所有图像。但是，关于我的代码的一些事情阻止我在bottom-gallery div或thumnbail-wrap div上使用overflow-x：scroll。如果视口足够小，它们将自动开始相互堆叠，而不是从左到右继续显示图像。即使我明确地将overflow-x：scroll添加到＃bottom-gallery和.thumbnail-wrap，它们也会设置为overflow-y，使它们可以垂直滚动，而我不想要

我在下面列出了相关的标记和CSS。我怀疑flexbox样式可能导致了我的问题，但我玩弄了删除css中的所有flexbox引用并且问题仍然存在。

是否存在阻止布局水平滚动的已知事项？

标记：

<div class="col-xs-12 hidden-md hidden-lg" id="bottom-gallery">
    <div class="thumbnail-wrap">
        <a href="" class="thumb-link" id="beardo"><img src="assets/images/beardo-thumb.jpg" alt="thumbnail"></a>
        <a href="" class="thumb-link" id="grecian"><img src="assets/images/grecian-thumb.jpg" alt="thumbnail"></a>
        <a href="" class="thumb-link" id="kreg-portrait"><img src="assets/images/kreg-portrait-thumb.jpg" alt="thumbnail"></a>
        <a href="" class="thumb-link" id="pigblood"><img src="assets/images/pigblood-thumb.jpg" alt="thumbnail"></a>
        <a href="" class="thumb-link" id="zombie"><img src="assets/images/zombie-thumb.jpg" alt="thumbnail"></a>        
    </div>
</div>

CSS：

#bottom-gallery {
    height:15vh;
    padding:15px 0;
    div.thumbnail-wrap {
        justify-content:flex-start;
        a {
            width:75px;
            height:75px;
            margin-bottom:15px;
            margin-right:10px;
        }
    }
}
div.thumbnail-wrap {
    display:flex;
    flex-flow:row wrap;
    img {
        width:100%;
        height:100%;
    }
}

Answer 1

这是让你入门所需的最低限度：

.thumbnail-wrap {
  overflow-x: scroll;
  display: flex;
}

.thumbnail-wrap .thumb-link {
  display: inline-block;
  flex: 1 0 auto;
}

<div class="thumbnail-wrap">
  <a href='' class='thumb-link'><img src="//placehold.it/400x100/0bf" alt='th'></a>
  <a href='' class='thumb-link'><img src="//placehold.it/400x100/fb0" alt='th'></a>
  <a href='' class='thumb-link'><img src="//placehold.it/400x100/0fb" alt='th'></a>
  <a href='' class='thumb-link'><img src="//placehold.it/400x100/f0b" alt='th'></a>
</div>

无法溢出-x：在页面上滚动工作

1 个答案: