Question

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

.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

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

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>

Answer 2

使页面/ div元素宽度超过100％的唯一方法是对其应用宽度超过100％的固定宽度，或仅在其中使用inline-blocks并应用{{1}到容器。

图像元素转到Div

2 个答案: