html - 仅在 div 中添加 x 方向的内容

Question

如何仅在 x 方向添加内容？

在<div>标签中，我放了 5 到 6 张图片。大于 div 的总宽度。因此，如果到达 div 宽度的末尾，它会回到新行。

我放了

img
{
    float:left;
}

但没有运气。

div的oveflow-x:scroll;

但没有运气。

我希望图像水平添加而不是垂直添加。我想在 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 个图像。之后它转到新行。我只想要该行中的所有图像。通过在 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;
}