サムネイル用の水平スクロールバー

Question

imはdivでimgsを持つthmbnailを持っていますので、imgが同じウィンドウで大きく表示されたときに押します。 デフォルトとして垂直の代わりに、horizo​​nalをスクロールして表示したいと考えています。 私が使用してyのスクロールバーを非表示にするmannaged：

overflow-x: auto; 
-ms-overflow-x: auto; 
overflow-y: hidden; 
-ms-overflow-y: hidden; 

は今どのように私はimgesはというし。水平限界の外に垂直制限を実行しますか。 私の写真がでserrundedされています

<div class='item'> 
<img src='picaddress.jpg' alt='picDescription' /> 
<p>'picDescription'</p> 

のadditonalコード：

<div id="imagegallery"> 
<div id="items"> 
     <div class='item'> 
     <img src="images/img1.jpg" alt="Test Image"> 
     <p>'Test Image'</p> 
     </div> 
     <div class='item'> 
     <img src="images/img2.jpg" alt="Test Image"> 
     <p>'Test Image'</p> 
     </div> 
     <div class='item'> 
     <img src="images/img3.jpg" alt="Test Image"> 
     <p>'Test Image'</p> 
     </div> 
     <div class='item'> 
     <img src="images/img4.jpg" alt="Test Image"> 
     <p>'Test Image'</p> 
     </div> 
     <div class='item'> 
     <img src="images/img5.jpg" alt="Test Image"> 
     <p>'Test Image'</p> 
     </div> 
    </div> 
</div> 

CSS：

#imagegallery{ 
background:#F2F2F2; 

パディング：10pxの10pxの10pxの10pxの; }

イメージギャラリーの#items {

width: 100%; 
border: 1px solid #DFDFDF; 
background:white; 
height: 100px; 
overflow: auto; 

}

イメージギャラリーの#items .item {

float: left; 
padding:5px; 
position: relative; 
width: 102px; 
height:77px; 
margin: 10px; 
background-color: #fff; 
cursor: pointer; 
border: 1px solid white; 
display: inline; 

}

イメージギャラリー#items .item：ホバー{

border: 1px solid #ddd; 

}

イメージギャラリー#items .item IMG {

max-width:100px; 
max-height:75px; 
width:100px; 

}

イメージギャラリーは、p {

display:none; 

}

その動のページを#itemsだからn写真の数は変わります。

Answer 1

私はあなたのことを正しく理解していて、画像をお互いの下ではなく隣り合わせに表示したいと考えています。

はそうのように、その仕事はあなたがクラス「アイテム」とdiv要素にfloat型プロパティを使用することができようにするには：

div.item { 
float: left; 
width: 100px; 
} 

の項目の後にクリアすることを忘れないでください。

すべてのアイテムの幅が周囲のdivの幅より大きい場合（overflow-x：scrollの場合）は、必要なものを得ることができます。

---

http://jsfiddle.net/deCube/Ctja7/で作成された例。

Answer 2

divに "ul"を使用し、 "ul"にmanu "li"を1行で表示できます。とのdiv " "UL" と "李"： "あなたはその後、スタイルだけができ

<div id="images"> 
    <ul> 
     <li><img src="images/rings/thumbnails/image1.jpg"></li> 
     <li><img src="images/rings/thumbnails/image2.jpg"></li> 
     <li><img src="images/rings/thumbnails/image3.jpg"></li> 
     <li><img src="images/rings/thumbnails/image4.jpg"></li> 
     <li><img src="images/rings/thumbnails/image5.jpg"></li> 
    </ul> 
</div> 

の

Exmaple" それからちょうど「UL &" LIを繰り返し、以下の画像の別の行を表示しますcss。サンプルページを見るhere画像の各ラインは5インチの「ul」で構成されています。役に立つと思ったら、コードをコピーすることを歓迎します。