仅在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; 
}