用於縮略圖的水平滾動條

Question

我有一個帶有imgs divmb的thmbnail，所以當img按下它在同一個窗口中顯示大。 我希望滾動橫向來看他們，而不是垂直作爲默認值。 我mannaged隱藏使用Y滾動條：

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> 

其他代碼：

<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的; }

imagegallery #items {

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

}

imagegallery #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; 

}

imagegallery #items .item：懸停{

border: 1px solid #ddd; 

}

imagegallery #items .item IMG {

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

}

imagegallery #items p {

display:none; 

}

其一個DINAMIC頁兒子圖片的改變。

Answer 1

我希望我理解你的權利，你希望有並排顯示等，而不是根據對方的圖像。

爲了使這項工作，你可以使用float屬性與類「項目」的DIV，像這樣：

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

不要忘記物品後清除。

如果所有項目的寬度更大然後周圍的div的寬度（具有溢出-X：滾動），你會得到你想要的。

---

創建於http://jsfiddle.net/deCube/Ctja7/的示例。

Answer 2

您可以在「UL」在你的DIV而顯示爲MANU「李」 S使用的「UL」只要你想在同一行。然後，顯示下面的圖像的另一條線，重複剛纔的「UL &‘李’S

〔實施例：

<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> 

然後，您可以只風格的‘格’，‘UL’和‘禮’與css看到一個示例頁面，我有here，每一行圖像都是一個「ul」，裏面有5「li」，如果你認爲它有用，你可以複製代碼