Question

我是CSS新手的javascript / PHP程序员，并且在将图像显示在带溢出的容器中时遇到一些麻烦。我的理解是下面的代码应该以三行显示图像，它们之间有15个像素的空间。相反，它会在div的左上角显示一个单独的图像。如果我删除了div的ID，图像会显示一条垂直线，如果我完全删除了div，它们会正常向右流过页面。当我给div一个背景色时，它看起来是合适的尺寸和位置。

#items_container {
    position:absolute;
    overflow:auto;
    height:500px;
    width:500px;
}
.item_image {
    margin: 0 15px 15px 0;
    padding: 0 0 0 0;
}

<div id="items_container">
    <img src="imageLocation" height="150" width="150" class="item_image" />
    <img src="imageLocation" height="150" width="150" class="item_image" />
    <img src="imageLocation" height="150" width="150" class="item_image" />
    <img src="imageLocation" height="150" width="150" class="item_image" />
    <img src="imageLocation" height="150" width="150" class="item_image" />
    <img src="imageLocation" height="150" width="150" class="item_image" />
</div>

我还尝试在HTML中为容器div提供高度/宽度，在CSS中为图像类提供高度/宽度。也没有做任何事情。感谢任何人的帮助！

Answer 1

我不确定我是否完全理解这个问题，但这就是我如何布局你的结构：

http://jsfiddle.net/mDXL2/

<强> HTML

<div id="items_container">
    <img src="imageLocation" height="150" width="150" class="item_image" />
    <img src="imageLocation" height="150" width="150" class="item_image" />
    <img src="imageLocation" height="150" width="150" class="item_image" />
    <img src="imageLocation" height="150" width="150" class="item_image" />
    <img src="imageLocation" height="150" width="150" class="item_image" />
    <img src="imageLocation" height="150" width="150" class="item_image" />
</div>

<强> CSS

#items_container {
    overflow:hidden;
    height:500px;
    width:500px;
}
.item_image {
    float:left;
    margin: 0 15px 15px 0;
    padding: 0 0 0 0;
}

隐藏的溢出可以用清除代替，但我更喜欢去溢出隐藏的路径。

之后你只需要浮动所有.item_image元素。

带图像的CSS溢出容器不起作用？

1 个答案: