Css 一行内联图像是否可能不触发水平滚动条？

有人知道是否可以在一行中水平显示一组内联图像（或该行中的任何元素），允许该组图像超出屏幕的右边缘，而无需触发水平滚动条

一个简单的例子：

<div class="page_container" style="width:900px; position:relative">
  <div class="image_set">    
    <img src="xxx.jpg" alt="" width="200" height="400" />
    <img src="xxx.jpg" alt="" width="200" height="400" />
    <img src="xxx.jpg" alt="" width="200" height="400" />
    <img src="xxx.jpg" alt="" width="200" height="400" />
    ...etc
  </div>
</div>

等

需要注意的是，我要扩展到浏览器右边缘或超出浏览器右边缘的图像集div包含在900px div中。图像集需要扩展到其容器的外部，并扩展到或超出浏览器窗口的边缘。。不触发滚动条

900px宽的page_容器元素需要与浏览器窗口正常交互（触发滚动条），并且元素必须包含图像。但是，必须允许图像从浏览器窗口的右边缘流出（视觉上）

---

因此，我想知道是否有一种方法可以仅使用css而不使用javascript来实现这一点？

只需将容器div设置为固定宽度，然后将其设置为

溢出：隐藏属性。比如：

<div class="image_set" style="width:100%; overflow: hidden;">    
    <img src="xxx.jpg" alt="" width="200" height="400" />
    <img src="xxx.jpg" alt="" width="200" height="400" />
    <img src="xxx.jpg" alt="" width="200" height="400" />
    <img src="xxx.jpg" alt="" width="200" height="400" />
</div>

只需将container div设置为固定宽度，然后将
overflow:hidden
属性赋予它即可。比如：

<div class="image_set" style="width:100%; overflow: hidden;">    
    <img src="xxx.jpg" alt="" width="200" height="400" />
    <img src="xxx.jpg" alt="" width="200" height="400" />
    <img src="xxx.jpg" alt="" width="200" height="400" />
    <img src="xxx.jpg" alt="" width="200" height="400" />
</div>

所以基本上你想要阻止的是一个双滚动条

尝试：

所以基本上你想要防止的是一个双滚动条

尝试：


给你：

CSS

#filmstrip {
    border-bottom: solid 5px rgb(220,220,220);
    border-top: solid 5px rgb(220,220,220);
    overflow-x: auto;
    padding: 5px 0;
    white-space: nowrap;
}
#filmstrip .cell {
    background: rgb(220,220,220);
    display: inline-block;
    height: 100px;
    width: 100px;
}
#filmstrip .cell + .cell {
    margin-left: 1px;
}

HTML

<div id="filmstrip">
    <div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div>
</div>


给你：

CSS

#filmstrip {
    border-bottom: solid 5px rgb(220,220,220);
    border-top: solid 5px rgb(220,220,220);
    overflow-x: auto;
    padding: 5px 0;
    white-space: nowrap;
}
#filmstrip .cell {
    background: rgb(220,220,220);
    display: inline-block;
    height: 100px;
    width: 100px;
}
#filmstrip .cell + .cell {
    margin-left: 1px;
}

HTML

<div id="filmstrip">
    <div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div>
</div>


谢谢您的回复。我需要图像集延伸到浏览器窗口的右边缘，而不仅仅是页面容器的右边缘。例如，如果页面是1100px…好的，我将相应地修改答案。@Marcus默认情况下
overflow
是
auto
@Marcus页面容器元素不幸是相对定位的，因此绝对定位图像集div没有帮助。应该绝对定位的是图像集div。直接包装内嵌图像的那一个。谢谢回复。我需要图像集延伸到浏览器窗口的右边缘，而不仅仅是页面容器的右边缘。例如，如果页面是1100px…好的，我将相应地修改答案。@Marcus默认情况下
overflow
是
auto
@Marcus页面容器元素不幸是相对定位的，因此绝对定位图像集div没有帮助。应该绝对定位的是图像集div。直接包装内嵌图像的那一个。同时也感谢回复。我需要将图像扩展到浏览器窗口的右边缘，或超出浏览器窗口的右边缘，而不是页面容器。这是一种奇怪的情况。基本上我需要创建一个单独的div，它可以有无限的宽度，并且可以被滚动条完全忽略。谢谢你的回复。我需要将图像扩展到浏览器窗口的右边缘，或超出浏览器窗口的右边缘，而不是页面容器。这是一种奇怪的情况。基本上，我需要创建一个具有无限宽度的div，并且被滚动条完全忽略。非常酷的应用程序（jsfiddle）。这通常也是我设置元素的方式，但是这个解决方案没有考虑page_容器divy。我需要你的#filmstrip元素扩展到容器div之外，并扩展到或关闭浏览器窗口的右边缘。非常酷的应用程序（JSFIDLE）。这通常也是我设置元素的方式，但是这个解决方案没有考虑page_容器divy。我需要您的#filmstrip元素扩展到容器div之外，并扩展到或关闭浏览器窗口的右边缘。