html - 图像元素在 Div 中换行

Question

如果图像数量超过 div 的宽度，我试图让 div 水平滚动。不幸的是，在尝试了我在堆栈上找到的所有内容之后，一旦图像数量超过了 div 的宽度，它就会被推到一个新行，而不是继续在具有滚动能力的同一行上。下面是 handlebars 模板和 sass。

https://jsfiddle.net/horuuf33/6/

.colourway-extension-wrapper {
  position: absolute;
  bottom: 0;
  max-height: 185px;
  width: 100%;
  overflow: hidden;
}

.facets-item-cell-grid-colourway {
    height: 0;
    background: rgba(255,255,255,0.5);
    overflow-x: scroll;
    overflow-y: hidden;
    width: auto;
    max-height: 185px;
    white-space: nowrap;

    -webkit-transition: height 0.5s;
    -moz-transition: height 0.5s;
    -ms-transition: height 0.5s;
    -o-transition: height 0.5s;
    transition: height 0.5s;
}

.item-colourway-wrapper {
  max-width: 100px;
  width: 100px;
  float: left;
  margin-right: 10px;
  visibility: hidden;
  text-align: center;
  text-transform: uppercase;
  font-weight: lighter;
}

.facets-item-cell-grid {
    &:hover {
        [class="facets-item-cell-grid-colourway"] {
            height: 185px;
        }
    [class="item-colourway-wrapper"] {
      visibility: initial;
    }
    }
}

模板:

{{#if isMoreColours}}
<div class="facets-item-cell-grid-colourway">


    {{#each option}}
        <div class="item-colourway-wrapper">
            <img class="facets-item-cell-colourway-img" src="{{resizeImage this.url 'thumbnail'}}" alt="{{this.altimagetext}}" itemprop="image"/>
            <p>{{this.colour}}</p>
        </div>
    {{/each}}


</div>
{{/if}}

Answer 1

只需将 .item-colourway-wrapper 中的 float: left; 替换为 display: inline-block;。

JSFiddle

.colourway-extension-wrapper {
  position: absolute;
  bottom: 0;
  max-height: 185px;
  width: 100%;
  overflow: hidden;
}

.facets-item-cell-grid-colourway {
  height: 185px;
  background: rgba(0, 0, 0, 1);
  overflow-x: scroll;
  overflow-y: hidden;
  width: auto;
  max-height: 185px;
  white-space: nowrap;
}

.item-colourway-wrapper {
  max-width: 100px;
  width: 100px;
  display: inline-block;
  margin-right: 10px;
  text-align: center;
  text-transform: uppercase;
  font-weight: lighter;
  background: #FFF;
}

<div class="facets-item-cell-grid-colourway">
  <div class="item-colourway-wrapper">
    <img class="facets-item-cell-colourway-img" src="" itemprop="image" />
    <p>Colour</p>
  </div>
  <div class="item-colourway-wrapper">
    <img class="facets-item-cell-colourway-img" src="" itemprop="image" />
    <p>Colour</p>
  </div>
  <div class="item-colourway-wrapper">
    <img class="facets-item-cell-colourway-img" src="" itemprop="image" />
    <p>Colour</p>
  </div>
  <div class="item-colourway-wrapper">
    <img class="facets-item-cell-colourway-img" src="" itemprop="image" />
    <p>Colour</p>
  </div>
  <div class="item-colourway-wrapper">
    <img class="facets-item-cell-colourway-img" src="" itemprop="image" />
    <p>Colour</p>
  </div>
  <div class="item-colourway-wrapper">
    <img class="facets-item-cell-colourway-img" src="" itemprop="image" />
    <p>Colour</p>
  </div>
  <div class="item-colourway-wrapper">
    <img class="facets-item-cell-colourway-img" src="" itemprop="image" />
    <p>Colour</p>
  </div>
  <div class="item-colourway-wrapper">
    <img class="facets-item-cell-colourway-img" src="" itemprop="image" />
    <p>Colour</p>
  </div>
</div>