滑動卡間距問題

Question

• 我已經制作了一些卡片並限制了它們的包裝，因此制作了一個卡片包裝紙，該包裝紙成為了水平可滾動卡片的容器。
• 我正在面對小問題。 最后一張卡的末尾沒有任何間距 。
• 見下面的截圖

  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鏈接：請點擊

有什么幫助嗎？

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