Question

有没有人知道是否可以在一行中水平显示一组内嵌图像（或其中的任何元素），允许该组延伸到屏幕的右边缘，而不会触发水平滚动条？

一个简单的例子：

<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>

问题是我想要扩展到或超出浏览器右边缘的image_set div包含在900px div中。 image_set需要扩展到其容器之外，并且延伸到浏览器窗口的边缘，或者超出浏览器窗口的边缘..而不需要触发滚动条。

900px宽的page_container元素需要与浏览器窗口正常交互（触发滚动条），元素必须包含图像。但是，必须允许图像从浏览器窗口的右边缘流出（直观地）

所以我想知道是否有一种方法可以用css来实现这一点，没有javascript？

Answer 1

只需使容器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>

默认overflow是auto，它会在需要时应用滚动条，因此将其设置为hidden将意味着任何破坏容器的东西都会在不需要滚动条的情况下消失，对于你是窗口的边缘，效果将会完成。

为了让包含div覆盖整个页面的宽度，您必须首先将其布局模型从block（通过其父div确定其宽度）更改为absolute或{{ 1}}。

使用属性fixed，div相对于其第一个父位置具有position: absolute位置，这通常是窗口本身，因此您可以使幻灯片的容器div使用此属性：

relative

Answer 2

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

尝试：

<div class="image_set" style="width:100%;position: relative;">

Answer 3

这里你去：http://jsfiddle.net/Vppxp/

<强> 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>

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

3 个答案: