代码之家 › 专栏 › 技术社区 › krupesh Anadkat

滑动卡间距问题

scroll css html

krupesh Anadkat · 技术社区 · 7 年前

成为卡 .
我面临一个小问题。这个在
见下面的截图

    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>

代码笔链接: Click

有什么帮助吗?

2 回复 | 直到 7 年前

rjhewitt3 7 年前

你需要做的就是把你的卡片间距从边距切换到边距,并在每张卡片上添加一个内部容器。

溢出的边距不会推动父容器中的项,而是将兄弟容器推向外部。由于溢出被隐藏(通过自动/滚动),所以它被有效地呈现 margin-right: 0;

相对容易的解决方法是使用填充。但是您必须创建一个内部容器,以便可以在内容上使用填充,并且背景色包含在间距内。

您可以在这里看到一个工作示例: https://codepen.io/rjhewitt3/pen/MqYjeg

Tharaka Nilupul Dharmabandu 7 年前

我想你在找这个解决办法。
.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>