html - 制作html框 "stick out"

Question

我正在尝试制作一个“图像 strip ”(许多小图像从屏幕左侧开始向左浮动到右侧)。问题是当我调整浏览器大小时，图像开始“堆叠”在(默认 block 行为)下，而不是简单地消失，“伸出容器”。我试过将容器的右边距设置为 -9999px 但它没有帮助。 我怎样才能做到这一点？

编辑:这是代码:

<div id='headerImages'>
    <img class="headerImage" src="images/header/cakeshop/image001.png" />
    <img class="headerImage" src="images/header/cakeshop/image002.png" />
    <img class="headerImage" src="images/header/cakeshop/image003.png" />
    <img class="headerImage" src="images/header/cakeshop/image004.png" />
</div>

和CSS:

#headerImages {
    width: 60%;
    overflow: hidden;
    margin-right: -9999px;
}

.headerImage {
    height: 300px;
    display: inline-block;
    float: left;
}

Answer 1

这是您需要的吗？

FIDDLE

使用您的代码: HTML:

<div id="wrapper">
<div id='headerImages'>
    <img class="headerImage" src="images/header/cakeshop/image001.png" />
    <img class="headerImage" src="images/header/cakeshop/image002.png" />
    <img class="headerImage" src="images/header/cakeshop/image003.png" />
    <img class="headerImage" src="images/header/cakeshop/image004.png" />
</div>
</div>

CSS

#wrapper {
    width: 60%;
    overflow: hidden;
}
#headerImages{
    width:2000px; /* set the width to total width of your images */
}

.headerImage {
    height: 300px;
    display: inline-block;
    float: left;
}