Question

我已经制作了一些卡片，并限制了它们的包装，因此卡片包装机，该包装机成为 Horizontal Scrollable的容器卡。
我正面临小问题。 最后一张卡没有空格，位于结束..
请参见下面的屏幕截图

    html,
    body {
      width: 100%;
      height: 100%;
    }
    
    body {
      background-color:#f4f4f4;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .card {
      display: flex;
      background-color: #fff;
      min-width: 100%;
      min-height: 200px;
      margin: 1rem;
      overflow-x: auto;
    }
    .card--content {
      background-color: #DED3EE;
      min-width: 200px;
      margin: 5px;
    }

    <section class="card">
      <div class="card--content"></div>
      <div class="card--content"></div>
      <div class="card--content"></div>
      <div class="card--content"></div>
      <div class="card--content"></div>
      <div class="card--content"></div>
      <div class="card--content"></div>
      <div class="card--content"></div>
      <div class="card--content"></div>
      <div class="card--content"></div>
    </section>

Codepen链接：Click

有帮助吗？

Answer 1

我认为您正在寻找这种解决方案。
您应该动态计算.card-track宽度
创建图像滑块时使用此方法

html,
body {
  width: 100%;
  background-color:#f4f4f4;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  background-color: red;
  width: 80%;
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
  overflow-x: scroll;
}
.card-track {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: calc(200px*10 + 10px*10); /*Card content width x no of iems + margins */
}
.card--content {
  background-color: #DED3EE;
  width: 200px;
  height: 120px;
  margin: 5px;
  float: left;
}

<section class="card">
  <div class="card-track">
    <div class="card--content"></div>
    <div class="card--content"></div>
    <div class="card--content"></div>
    <div class="card--content"></div>
    <div class="card--content"></div>
    <div class="card--content"></div>
    <div class="card--content"></div>
    <div class="card--content"></div>
    <div class="card--content"></div>
    <div class="card--content"></div>
  </div>
</section>

Answer 2

您需要做的就是将卡的间距从边距更改为填充，并为每个卡添加一个内部容器。

溢价幅度不会将项目推送到父容器中，而是会将兄弟姐妹推送到外部。由于您已隐藏了溢出（通过自动/滚动），因此可以margin-right: 0;

有效地进行渲染

一个相对简单的解决方法是改用padding。但是，您必须创建一个内部容器，以便可以在内容上使用填充，以便将背景颜色包含在间隔中。

您可以在此处看到一个有效的示例：https://codepen.io/rjhewitt3/pen/MqYjeg

滑动卡间距问题

2 个答案: