代码之家 › 专栏 › 技术社区 › kirtan403

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

css html

kirtan403 · 技术社区 · 11 年前

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

在里面 <div> 标签我正在放置5到6个图像。大于div的总宽度。所以在if到达div宽度的末尾之后,它会返回到新行。

我把

img
{
    float:left;
}

但没有运气。

分区 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方向上滚动,它应该是可见的。

2 回复 | 直到 11 年前

cimmanon 11 年前

无需指定容器的宽度或添加额外的标记,只需告诉它不要换行即可。

http://jsfiddle.net/BHD5Y/

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

user1633525 user1633525 11 年前

试试这个:

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

推荐文章

Softly · 单选按钮未按预期取值

1 年前