时间戳

首页 > 解决方案 > 一次水平显示 5 个缩略图

css - 一次水平显示 5 个缩略图

问题描述

我需要一些帮助来确定缩略图容器的一些样式。使用这种当前样式：

#modal-window.full-gallery {
  max-width: 961px;

.thumbnail-container {
    margin: 0 auto;
    height:64px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
  }

.sp-thumbnail {
    cursor: pointer;
    width: 100%;
    height: 50px;
    margin-right: 7px;
    background-repeat: no-repeat;
    background-position: center;
    border: 0;
  }
}

这是我切换到移动视图时上述样式的结果： 在此处输入图像描述

当我在移动设备中查看它时，它会压缩所有 10 个缩略图，但我希望它一次只显示五个，两个在视图的两个边缘，只显示一半图像，就像它被截断一样，如下所示： 在此处输入图像描述

我试过这个：

.thumbnail-container {
    margin: 30px auto;
    width: 80%;
    overflow: hidden;
  }

但这给了我在移动视图中并排的两列五个缩略图，换句话说，两个垂直列的五个缩略图像这样： 在此处输入图像描述

我可能需要在媒体查询中执行此操作，因为这确实会影响桌面视图，但我可以解决这个问题，我只是不确定如何显示 10 个缩略图中的 5 个，其中两个看起来像是在截断移动视图的边缘。

为了进一步澄清，这是一个模态特征。它的html是：

<div class="modal-info">
  <div class="modal_message">
    <div class="modal-content">
      <div class="content-container">

        <div class="thumbnail-container">
          <button class="sp-thumbnail magic ada-el-focus" data-action="card-magic" title="View the Magic card"></button>
          <button class="sp-thumbnail th ada-el-focus" data-action="card-th" title="View the Celebration card"></button>
          <button class="sp-thumbnail ice-cream ada-el-focus" data-action="card-ice-cream" title="View the ice-cream card"></button>
          <button class="sp-thumbnail yoga ada-el-focus" data-action="card-yoga" title="View the Yoga card"></button>
          <button class="sp-thumbnail gaia ada-el-focus" data-action="card-gaia" title="View the Gaia card"></button>
          <button class="sp-thumbnail bbq ada-el-focus" data-action="card-bbq" title="View the BBQ card"></button>
          <button class="sp-thumbnail pinker ada-el-focus" data-action="card-pinker" title="View the Pink card"></button>
          <button class="sp-thumbnail spotlight ada-el-focus" data-action="card-spotlight" title="View the Spotlight card"></button>
          <button class="sp-thumbnail pals ada-el-focus" data-action="card-pals" title="View the Pals card"></button>
          <button class="sp-thumbnail father ada-el-focus" data-action="card-father" title="View the father card"></button>
        </div>
      </div>
    </div>
  </div>
</div>

所以我不确定我是否可以解决所有这些问题，thumbnail-container或者我还需要调整一些东西sp-thumbnail。我一直在尝试不同的事情，但我到处都是，没有得到我想要的结果。

所以你可以说，我不希望里面的东西thumbnail-container有响应。让我解释一下，我希望图像在调整视图大小时调整大小，但是随着视图变小，我希望缩略图在视图边缘被切断。

标签： csssass

解决方案

因此，对于您，thumbnail-container我会离开，display: flex但我会摆脱其他 flex 类型的属性。Flex 肯定会让您感到困难。

所以它看起来像这样：

.thumbnail-container {
    margin: 0 auto;
    height:64px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

并且因为sp-thumbnail我会更改width:为min-width: 20%;Flex 因吹牛而臭名昭著width。它更容易接受min-width。

试一试。

推荐阅读