Question

我正在尝试制作一个“图像条”（从屏幕左侧开始向右浮动的许多小图像向右）。问题是当我调整浏览器大小时，图像开始“堆叠”（默认块行为）而不是简单地消失，“伸出容器”。我已经尝试将容器的右边距设置为-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;
}

Answer 2

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

让HTML框“坚持”

2 个答案: