Question

<div id="divT">
<img class="divTimg" src="divT/00.jpg" alt="img">
<img class="divTimg" src="divT/01.jpg" alt="img">
<img class="divTimg" src="divT/02.jpg" alt="img">
<img class="divTimg" src="divT/03.jpg" alt="img">
<img class="divTimg" src="divT/04.jpg" alt="img">
<img class="divTimg" src="divT/05.jpg" alt="img">
<div class="clear"></div>
</div>

CSS

#divT{
    overflow-x:hidden;
}
.divTimg{
    float:left;
    width:17%;
    cursor:pointer;
    border-right:2px ridge gold;
}

05.jpg放在一个新的行中，与其余图像相反，但我需要将它们全部保存在一行中，如果没有足够的空间 - 最后一个图像应该部分可见。

我为parrent div尝试了overflow-x的各种值，但没有成功。

Answer 1

要实现'滚动到副作用'，您需要创建一个包装元素，其中包含一个更宽的元素，然后包含您的图像。然后，这允许您缩小或增大可见部分，同时使隐藏内容显示为可滚动。

 <div class="scroll">
    <div class="scroll_wrapper">
        <img class="scroll_image" src="" />
        <img class="scroll_image" src="" />
        <img class="scroll_image" src="" />
        <img class="scroll_image" src="" />
        <img class="scroll_image" src="" />
        <img class="scroll_image" src="" />
        <img class="scroll_image" src="" />
        <img class="scroll_image" src="" />
        <img class="scroll_image" src="" />
    // images
    </div>
</div>

然后是CSS

.scroll {
    width: 200px; // how much you want to see at once
    overflow: auto;
}

.scroll_wrapper {
    width: 600px; // this can be any number higher than the total width of the elements inside it
}

.scroll_image {
    background: red;
    height: 10px;
    width: 50px; // just to test the scrolling
}

可以找到jsfiddle here

Answer 2

用另一个包装器包装图像列表：

<div id="wrapper">
    <div id="divT">
        <img class="divTimg" src="divT/00.jpg" alt="img">
        <img class="divTimg" src="divT/01.jpg" alt="img">
        <img class="divTimg" src="divT/02.jpg" alt="img">
        <img class="divTimg" src="divT/03.jpg" alt="img">
        <img class="divTimg" src="divT/04.jpg" alt="img">
        <img class="divTimg" src="divT/05.jpg" alt="omg">
        <div class="clear"></div>
    </div>
</div>

添加一些样式：

#wrapper {
    overflow:hidden;
}
#divT {
    width:105%;
}

如何将所有浮动图像保持在一行？

2 个答案: