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

仅在div中以x方向添加内容

2 个答案: