内联块无法按预期工作

Question

我想创建一个固定宽度/高度div负载的页面，当它们到达页面边缘时，它们会环绕（从左到右）。

首先，较小的div宽度/高度被忽略，因此它们重叠。

其次，divs向下移动页面而不是整个页面。

http://jsfiddle.net/beakie/3S465/

谁能告诉我为什么（以及解决这个问题我需要做什么）？

谢谢

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>Store Name</title>

        <style>
            .item-container {
                width: 1200px;
                height: 1200px;
                background-color: blue;
            }

            .item {
                display: inline-block;
                width: 200px;
                height: 200px;
                background-color: red;
                border: 1px solid black;
            }

            .image {
                width: 100px;
                height: 100px;
                background-color: green;
            }

            .name {
                background-color: purple;
            }

            .quantity {
                background-color: orange;
            }
        </style>
    </head>
    <body>
        <div>
            Store Name
        </div>
        <div class="item-container">
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
        </div>
    </body>
</html>

Answer 1

问题如下：

<div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />

自关闭div不存在！ 这应该写为：

<div class="image" style="/*background-image: url('Artwork/1159.jpg');*/"></div>

PS：我会显示一个更新的小提琴，但是该网站现在似乎已损坏。

Answer 2

您可以尝试以下代码：

<div class="image" style=""></div>

和

<img src="" />

因为div不是自我关闭标签。