html - 了解溢出属性

Question

我正在尝试创建一个包含 float 图像列表的 div。由于它们的数量，它们会破坏容器。我希望容器在滚动时水平滚动。目前，它只是断裂，将它们垂直堆叠:

http://jsfiddle.net/tmyie/YUhF9/1/

CSS

.slideshow-container-row-3 {
    height: 250px;
    background-color: grey;
    width: 1025px;
    overflow: scroll;
}

    .img {
    width: 160px;
    background-color: orange;
    height: 250px;
    margin-left: 10px;
    float: left;
}

.img:first-of-type {
    margin-left: 0;
}

HTML

<div class="slideshow-container-row-3">
    <div class="img">.</div>
    <div class="img">.</div>
    <div class="img">.</div>
     <div class="img">.</div>
    <div class="img">.</div>
    <div class="img">.</div>
    <div class="img">.</div>
    <div class="img">.</div>
    <div class="img">.</div>


</div>

Answer 1

您正在使用 float，而不是让它们 display: inline-block; 并在 wrapper 元素上使用 white-space: nowrap;以防止缠绕。

Demo

.slideshow-container-row-3 {
    height: 250px;
    background-color: grey;
    width: 1025px;
    overflow: scroll;
    white-space: nowrap;
}

.img {
    width: 160px;
    background-color: orange;
    height: 250px;
    margin-left: 10px;
    display: inline-block;

    /* Use these as well */
    vertical-align: top;
    white-space: normal;
}

Important Note: Make sure you use white-space: normal; for the child elements i.e .img else they will inherit the parent property. Also use vertical-align: top; to the .img as inline-block are aligned to the baseline by default.