0

我是一个全新的 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 中为图像类指定高度/宽度。也没有做任何事情。谢谢大家的帮助！

4

1 回答 1

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 元素。

于 2013-03-12T19:57:28.677 回答