css - div 向下滚动页面而不是 2 行

Question

我坐在这里摸不着头脑，我应该有 2 行，每行 4 个 div，正如它在 Dreamweaver 中显示的那样，尽管在上传它时，它们只是一个下一页地向下移动。

HTML:

<link rel="stylesheet" type="text/css" media="screen, print, projection"  href="css/common.css"</link> 

<div id="mainimage"><?php include_once "projects/wc2/mainimage.php"; ?></div>
<div id="titletext"><?php include_once "projects/wc2/titletext.php"; ?></div>
<div id="images">
<div id="1" class="thumb">Hello I am a thumbnail!</div>
<div id="2" class="thumb">Hello I am a thumbnail!</div>
<div id="3" class="thumb">Hello I am a thumbnail!</div>
<div id="4" class="thumb">Hello I am a thumbnail!</div>
<div id="5" class="thumb">Hello I am a thumbnail!</div>
<div id="6" class="thumb">Hello I am a thumbnail!</div>
<div id="7" class="thumb">Hello I am a thumbnail!</div>
<div id="8" class="thumb">Hello I am a thumbnail!</div>
</div>

CSS:

@charset "UTF-8";
/* CSS Document */

#site {
    position: absolute;
    height: 600px;
    width: 960px;
}

/* ---------------------------------------- */
/* leftside - including logo and navigation */
/* ---------------------------------------- */

#leftside {
    position: relative;
    float: left;
    height: 600px;
    width: 325px;
    background-color: #FFF
}

#logo {
    position: relative;
    top: 0px;
    left: 0px;
}

#nav {
    position: relative;
    font: "Courier New", Courier, monospace;
    font-size: 12px;
    top: 40px;
    left: 25%;
}

    /* link styling */

    a:link {color: #000; text-decoration: none;}   /* unvisited link */
    a:visited {color: #000; text-decoration: none;} /* visited link */
    a:hover {color: #F60; text-decoration: none;} /* mouse over link */
    a:active {color: #F60; text-decoration: none;}  /* selected link */



/* ------------------- */
/* content and gallery */
/* ------------------- */

#content {
    position: relative;
    float: right;
    height: 600px;
    width: 635px;
    background-color: #FFF
}

#mainimage {
    position: absolute;
    height: 420px;
    width: 400px;
    top: 100px;
    left: 97px;
}

.image {
    -moz-box-shadow: 3px 3px 3px #666; 
    -webkit-box-shadow: 3px 3px 3px #666; 
    -box-shadow: 3px 3px 3px #666;
}

#titletext {
    font: "Courier New", Courier, monospace;
    font-size: 12px;
    position: absolute;
    height: 420px;
    width: 300px;
    top: 100px;
    left: 500px;    
}

/* ---------------------- */
/* thumbnails - 8 of them */
/* ---------------------- */

#images {
    position: absolute;
    overflow: 0px;
    height: 400px;
    width: 700px;
    top: 600px;
    left: 100px;
}

.thumb {
    height: 150px;
    width: 150px;
}

#1 {
    position: absolute;
    top: 33px;
    left: 20px;
}

#2 {
    position: absolute;
    top: 33px;
    left: 190px;
}

#3 {
    position: absolute;
    top: 33px;
    left: 360px;
}

#4 {
    position: absolute;
    top: 33px;
    left: 530px;
}

#5 {
    position: absolute;
    top: 203px;
    left: 20px;
}

#6 {
    position: absolute;
    top: 203px;
    left: 190px;
}

#7 {
    position: absolute;
    top: 203px;
    left: 360px;
}

#8 {
    position: absolute;
    top: 203px;
    left: 530px;
}

如能对此有所启发，我们将不胜感激。

Answer 1

为什么在每张图片的ID上使用position: absolute？这似乎不是一个可扩展性很强的解决方案。

相反，因为您的缩略图是固定大小的，您还可以将 display: inline-block 添加到您的 .thumb 样式中。

这是修复:http://jsfiddle.net/hCkBz/

此外，ID CSS 样式不起作用的原因是 ID 不允许以数字开头。 http://www.w3.org/TR/html4/types.html#type-name