僅在div中添加x方向內容

Question

如何僅在x方向添加內容？

in <div>標記我把5至6張圖片。大於div的總寬度。因此，如果達到div寬度的結尾，它會回到新行。

我已經把

img 
{ 
    float:left; 
} 

，但沒有運氣。

div的oveflow-x:scroll;

，但沒有運氣。

我希望圖像b水平添加而不是垂直添加。我想要在x方向上的滾動條查看所有圖像。

我在哪裏失蹤？

HTML：

<div id="scrollar"> 
<img src="1.jpg"> 
<img src="2.jpg"> 
<img src="3.jpg"> 
<img src="4.jpg"> 
<img src="5.jpg"> 
<img src="6.jpg"> 
<img src="7.jpg"> 
<img src="8.jpg"> 
</div> 

寬度包含5 images.after，它去到新的生產線。我只需要該行中的所有圖像。它應該可以通過沿x方向滾動來看到。

Answer 1

無需指定容器的寬度或添加額外的標記，只是告訴它不換行。

http://jsfiddle.net/BHD5Y/

div#scrollar { 
    white-space: nowrap; 
    overflow-x: scroll; 
} 

Answer 2

試試這個：

HTML：

<div class="wrapper"> 
    <div class="content"> 
     <img src="img/01.jpg" alt="" width="675"> 
     <img src="img/02.jpg" alt="" width="675"> 
     <img src="img/03.jpg" alt="" width="675"> 
     <img src="img/04.jpg" alt="" width="675"> 
     <img src="img/05.jpg" alt="" width="675"> 
    </div> 
</div> 

和CSS：

.wrapper{ 
    width:100%; 
    height:100%; 
    overflow:auto; 
} 

.content{ 
    height:450px; 
    width: 3375px; 
    position:absolute; 
    left:0; 
    top:0; 
} 

.portfolio img{ 
    margin:0 12px; 
    float:left; 
}