ウェブギャラリーのフォーマット

Question

次のコードを使用して、小さなウェブギャラリーを作成しています。サムネイルは垂直方向に配置され、IDはメイン画像の下に水平に表示されます。誰にもそうする方法の提案はありますか？親指を包む

<div id="content"> 
    <script type="text/javascript"> 
     function myshowImages(id) { 

      /**$(".bigPic").hide(); 
       $("#pic-"+id).show();*/ 
       $('.bigPic').css({'display':'none'}); 
       $("#pic-"+id).fadeIn('slow'); 

     } 
    </script> 
    <script> 
     $(document).ready(function() { 
      $('.email-sign-up').css({'marginBottom':'0px'});   
     }) 
    </script> 

    <div class="product"> 
     <div class="galerie"> 
      <div class="bigPics"> 
       <a href="insert" target="_blank"> 
        <img src="insert" title="" alt="" id="pic-0" width="450" height="450" class="bigPic" name="bigPic" /> 
       </a> 
       <a href="insert" target="_blank"> 
        <img src="insert" title="" alt="" id="pic-1" width="450" height="450" class="bigPic" name="bigPic" style="display:none;" /> 
       </a> 
      </div> 

      <div class="thumbnails"> 
       <div class="mini-thumb"> 
        <a href="javascript:myshowImages(0)" > 
         <img src="insert" title="" alt="" /> 
        </a> 
       </div> 
       <div class="mini-thumb"> 
        <a href="javascript:myshowImages(1)" > 
         <img src="insert" title="" alt="" /> 
        </a> 
       </div> 

Answer 1

div要素は、それが利用可能な水平スペースの100％を取るために要素を起こしdisplay: blockのデフォルトのCSSスタイルを、持っています。あなたは、次のルールでこれを変更することができます：

サイドノート、よくインデントマークアップとして

.mini-thumb { 
    display: inline-block; 
} 

• display property
• DEMO

を使用すると、終了</div>タグが欠落しているなどの問題を識別することができ、書式設定の問題を引き起こす可能性があります。