如何重新組織縮略圖顯示此頁面的方式？

Question

這裏是頁面的鏈接：http://www.web-design-talk.co.uk/examples/5/

我想要的是類似於上面的鏈接頁面。但是，不要在大圖像的底部顯示拇指指甲，而是希望它們顯示在右側（整個書寫/描述所在的位置），並將整段文字切換到較大的圖像底部縮略圖所在的圖像。

有人可以告訴我怎樣才能重新組織這個網頁。非常感謝你！

你可以看到我在這麼遠：http://www.jsfiddle.net/11mini11/EQBXF/1

對於CSS

body{background:url(../img/body-bg.jpg) top left repeat; font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;} 

h1 {font-size:1.2em; color:#330066; font-weight:bold; margin:0 0 25px 0; letter-spacing:0.02em;} 

h2 {color:#ff0000; font-weight:bold; margin:0 0 10px 0;} 
h2 span { font-style:italic; color:#ccc; font-size:0.7em; text-decoration: line-through} 

p { font-size: 0.80em; line-height:1.5em; margin:0 0 10px 0} 

.center { text-align:center;} 
.center a {color:#333; font-weight:bold;} 
.center a:hover {color:#666} 

#wrap {width:690px; margin:50px auto; display:block; background:url(../images/wrap-bg.jpg) top left repeat-x; padding:25px;} 

#left {width:350px; float:left; margin:0 20px 0 0;} 

#bigpic {width:320px; height:340px; float:left; margin:0 0 30px 0; } 
#bigpic img { display:block; margin:0 auto; width: 252px; } 

#thumbs {height:100px; width:350px; clear:both; display:block;} 
#thumbs ul li {height:100px;width:100px;display: inline; padding:0 10px 0 0; float:left;} 
#thumbs ul li img {border:1px solid #ccc;} 
#thumbs ul li img:hover {cursor:pointer;border:1px solid #ddd;} 

p#desc {text-align:center;padding: 10px 0} 

img#apple {width:188px; margin:0 auto; display:block} 

.b {border:1px solid #ccc;} 

.curvey {-moz-border-radius:30px; -webkit-border-radius: 30px;} 

對於HTML

<div id="wrap" class="b curvey"> 
    <h1>Some Super Amazing iPhone Yay</h1> 

    <div id="left"> 

     <div id="bigpic" class="b"> 
      <img src="images/big/iphone-3-big.jpg" alt="iPod Shuffle 16GB Zoom View" /> 

      <p id="desc">iPod Shuffle 16GB Zoom View</p> 

     </div> 

     <div id="thumbs"> 
      <ul> 
       <li><a href="images/big/iphone-1-big.jpg" rel="images/small/iphone-1-small.jpg"> 
         <img src="images/small/iphone-1-small.jpg" alt="iPod Shuffle Front View In Blue!" /> 
        </a> 
       </li> 

       <li> 
        <a href="images/big/iphone-2-big.jpg" rel="images/small/iphone-2-small.jpg"> 
         <img src="images/small/iphone-2-small.jpg" alt="iPod Shuffle Dual View Grey!" /> 
        </a> 
       </li 
       > 
       <li> 
        <a href="images/big/iphone-3-big.jpg" rel="images/small/iphone-3-small.jpg"> 
         <img src="images/small/iphone-3-small.jpg" alt="iPod Shuffle 16GB Zoom View" /> 
        </a> 
       </li> 
      </ul> 

     </div> 

    </div> 


    <h2>&pound;125.99 <span>was &pound;155.99</span></h2> 

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim 
    ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 
    in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 
    deserunt mollit anim id est laborum</p> 

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim 
    ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 

    <img src="images/apple.gif" alt="apple" id="apple" /> 

    <a href="#" class="button" id="add-to-cart"><span>Add to Basket</span></a> 

    <div class="clear"></div> 


</div> 

<p class="center"><a href="#">&laquo; Back to tutorial at web-design-talk.co.uk ....</a></p> 

Answer 1

請嘗試以下

#left { 
width: 600px; 
margin: 0 20px 0 0; 
height: 500px; 
} 

#bigpic { 
width: 320px; 
height: 340px; 
float: left; 
margin: 0 0 30px 0; 

#thumbs { 
height: 400px; 
width: 100px; 
float: left; 
} 

#thumbs ul li { 
height: 100px; 
width: 100px; 
padding: 0 10px 0 0;