Question

我正在尝试创建一个包含浮动图像列表的div。由于它们的数量，它们打破了容器。我希望容器在它们执行时水平滚动。此刻，它只是打破，垂直堆叠：

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;并在包装器元素上使用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;
}

重要说明：确保对子元素white-space: normal;使用.img，否则它们将继承父属性。同时使用vertical-align: top; .img，inline-block默认情况下与baseline对齐。

Answer 2

我虽然最好在容器中声明一个容器

HTML部分

<div class="less_container">
    <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>
</div>

CSS版

.less_container{
    height: 250px;
    width: 1025px;
    overflow-x: scroll;
    overflow-y: hidden;
}

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

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

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

了解溢出属性

2 个答案: