divs滾動頁面而不是2行

Question

我坐在這裏抓我的頭在這裏，我應該有2行4 divs，因爲它在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