divs 2行ではなくページをスクロール

Question

私はここに私の頭を傷つけています。私はDreamweaverに表示されているように、4つのdivの2行を持っているはずです。ページ1

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を使用しますか？それは非常にスケーラブルなソリューションのようには見えません。

代わりに、サムネイルが固定サイズであるため、.thumbスタイルにdisplay: inline-blockを追加することもできます。ここで

は修正だ：http://jsfiddle.net/hCkBz/

はまた、IDのCSSスタイルが働いていない理由は、IDは数字で始めることは許されないということです。 http://www.w3.org/TR/html4/types.html#type-name