使html框“突出”

Question

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

编辑:这是代码：

<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

这就是你需要的吗？

小提琴

使用您的代码: 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;
}

Answer 2

没有看到它，您可以做的是将容器上的width设置为百分比，并设置overflow: hidden。这将导致图像隐藏在容器内，而不是跳到下一行。