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

05.jpg

被放置在一个新的行中，下面是其余的图像，但我需要将它们全部放在一行中，如果没有足够的空间，最后的图像应该部分可见

---

我尝试了parrent div的

overflow-x

的各种值，但没有成功。

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

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

---

可以找到用于此的JSFIDLE

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

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

---

为什么要使用

float

？

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

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

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