内联块不能按预期工作
我想创建一个页面,其中包含固定宽度/高度的div,当它们到达页面边缘时(从左到右).
首先,较小的div宽度/高度被忽略,因此它们是重叠的.
其次,div正在页面上而不是跨越.
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>
问题如下:
<div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
自我关闭div不存在!这应写成:
<div class="image" style="/*background-image: url('Artwork/1159.jpg');*/"></div>
PS:我会展示一个更新的小提琴,但该网站现在似乎已被打破.