Проблема с интервалом между сдвигающимися картами
- Я сделал несколько карточек и ограничил их упаковку, таким образом карта-обертка, которая становится контейнером для Горизонтальная прокрутка Карты.
- У меня небольшая проблема. Последняя карточка не имеет пробелов в конец..
- См. Снимок экрана ниже
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: Нажмите
Любая помощь?
@Viira Я желаю, чтобы в конце последней карты был пробел. Как и на всех других карточках, слева и справа есть пробелы. Такое же поведение я хочу для последней карты
Ответы 2
Я думаю, вы ищете это решение.
Вы должны рассчитывать ширину .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>Ваш ответ решает проблему. Но моя страница загружает карточки динамически, все время меняется. Количество карточек не фиксировано. У меня много разделов и у всех может быть разное количество карточек, что тоже не исправлено. Можете ли вы предложить какое-то другое решение, спасибо
Все, что вам нужно сделать, это переключить расстояние между карточками с поля на заполнение и добавить внутренний контейнер к каждой карточке.
Переполнение поля не выталкивает элементы в родительский контейнер, а выталкивает братьев и сестер наружу. Поскольку у вас есть скрытое переполнение (с помощью авто / прокрутки), оно эффективно отображается margin-right: 0;
Относительно простое решение - использовать вместо него отступы. Но вам нужно будет создать внутренний контейнер, чтобы вы могли использовать отступы для содержимого и чтобы цвет фона содержался в интервале.
Здесь вы можете увидеть рабочий пример: https://codepen.io/rjhewitt3/pen/MqYjeg
Каков ваш желаемый результат?