使用固定的HTML代码创建两个可向右滚动的行

发布于04月13日

我用Flexbox创建了一个布局，可以显示20张图像，1行6张，然后其余的图像隐藏并在滚动时查看.我try 创建2行，每行中有6个图像，然后当滚动以查看右侧的下一个图像时，其余图像应该相同.下面是一行中6的代码工作代码，

.image-gallery {
  display: flex;
  overflow: hidden;
}

.image-gallery .row {
  display: flex;
  flex-wrap: nowrap;
  /* Prevent wrapping */
  overflow-x: auto;
  /* Enable horizontal scrolling */
  scroll-snap-type: x mandatory;
  /* Enable snapping behavior */
  -webkit-overflow-scrolling: touch;
  /* For smooth scrolling on iOS */
}

.image-gallery .row img {
  flex: 0 0 calc(100% / 6);
  /* Adjusted to display 6 images in a row */
  scroll-snap-align: start;
  /* Align images to start */
}

<div class="image-gallery">
  <div class="row">
    <img src="https://picsum.photos/200/300?random=1" alt="Image 1">
    <img src="https://picsum.photos/200/300?random=2" alt="Image 2">
    <img src="https://picsum.photos/200/300?random=3" alt="Image 3">
    <img src="https://picsum.photos/200/300?random=4" alt="Image 4">
    <img src="https://picsum.photos/200/300?random=5" alt="Image 5">
    <img src="https://picsum.photos/200/300?random=6" alt="Image 6">
    <img src="https://picsum.photos/200/300?random=7" alt="Image 7">
    <img src="https://picsum.photos/200/300?random=8" alt="Image 8">
    <img src="https://picsum.photos/200/300?random=9" alt="Image 9">
    <img src="https://picsum.photos/200/300?random=10" alt="Image 10">
    <img src="https://picsum.photos/200/300?random=11" alt="Image 11">
    <img src="https://picsum.photos/200/300?random=12" alt="Image 12">
    <img src="https://picsum.photos/200/300?random=13" alt="Image 13">
    <img src="https://picsum.photos/200/300?random=14" alt="Image 14">
    <img src="https://picsum.photos/200/300?random=15" alt="Image 15">
    <img src="https://picsum.photos/200/300?random=16" alt="Image 16">
    <img src="https://picsum.photos/200/300?random=17" alt="Image 17">
    <img src="https://picsum.photos/200/300?random=18" alt="Image 18">
    <img src="https://picsum.photos/200/300?random=19" alt="Image 19">
    <img src="https://picsum.photos/200/300?random=20" alt="Image 20">
  </div>
</div>

desired layout

.image-gallery { overflow: hidden; overflow-x: auto; /* Enable horizontal scrolling */ scroll-snap-type: x mandatory; /* Enable snapping behavior */ -webkit-overflow-scrolling: touch; /* For smooth scrolling on iOS */ } .image-gallery .row { display: flex; flex-wrap: nowrap; /* Prevent wrapping */ } .image-gallery .row img { flex: 0 0 calc(100% / 6); /* Adjusted to display 6 images in a row */ scroll-snap-align: start; /* Align images to start */ }

.image-gallery { display: flex; overflow-x: auto; /* Enable horizontal scrolling */ scroll-snap-type: x mandatory; /* Enable snapping behavior */ -webkit-overflow-scrolling: touch; /* For smooth scrolling on iOS */ } .image-gallery .row { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-template-columns: repeat(6, 1fr); } .image-gallery .row img { /* Adjusted to display 6 images in a row */ scroll-snap-align: start; /* Align images to start */ }

使用固定的HTML代码创建两个可向右滚动的行

推荐答案

Html相关问答推荐

从网络抓取中提取文本

Xpath：提取标签之间的文本，但一旦出现嵌入标签就停止

如何使用html和css将两个项目垂直对齐

容器内的SVG图像没有响应

这<；td&>如何溢出<；表>；？

在TWebLabel标题中设置换行符/换行符的方法？

错误时交换表单，成功时使用HTMX重定向

如何在没有包装元素的情况下在React(Next.js)中呈现HTML注释

使用不同字体对齐元素

当div位于flexbox中时，如何使div的宽度与高度相同

调整 Rmarkdown 输出的 html_document 的标题和副标题之间的间距

如何居中此按钮，即使它已经在计算机分辨率中居中

并排放置两个 div，同时 div2 环绕 div1

第 117 行的块标记无效：endblock，应为empty或endfor.您是否忘记注册或加载此标签？

如何使用 Bootstrap Grid 系统修复大屏幕上图片和进度条之间的空白？

如何通过像图像一样的元素来调整 SVG 图标的大小

有没有办法在 Flutter 中创建这个浮动标签表单？

不同屏幕尺寸的显示问题

暗模式转换器

下拉菜单项在页面加载时显示，需要隐藏直到悬停