css - 如何将所有 float 图像保持在一行中？

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 放在一个新行中，在其余图片下方，但我需要将它们全部放在一行中，如果没有足够的空间 - 最后一张图片应该是部分可见。

我尝试为父级 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