Как создать ряд карточек с возможностью прокрутки, например, реализованный DuckDuckGo / поиском Google? - PullRequest
0 голосов
/ 04 апреля 2019

Как реализовать следующий ряд карточек?

enter image description here

ссылался на следующую ссылку, но на нее нет ответов Как создатьгоризонтальный прокручиваемый список html-карт, таких как результаты поиска chrome на мобильных устройствах?

https://benfrain.com/playground/scroller.html слишком сложно.

Вот что у меня так далеко:

body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cardRow {
  display: flex;
  width: 100%;
  height: 210px;
  overflow-x: scroll;
  background: #222;
}

.card {
  background-color: #ecf0f1;
  width: 200px;
  /*Not working???*/
  height: 200px;
  margin-right: 15px;
  padding: 5px;
  color: #34495e
}
<div class="cardRow">
  <div class="card">Card Content</div>
  <div class="card">Card Content</div>
  <div class="card">Card Content</div>
  <div class="card">Card Content</div>
  <div class="card">Card Content</div>
  <div class="card">Card Content</div>
  <div class="card">Card Content</div>
  <div class="card">Card Content</div>
  <div class="card">Card Content</div>
  <div class="card">Card Content</div>
  <div class="card">Card Content</div>
  <div class="card">Card Content</div>
  <div class="card">Card Content</div>
  <div class="card">Card Content</div>
  <div class="card">Card Content</div>
  <div class="card">Card Content</div>
  <div class="card">Card Content</div>
  <div class="card">Card Content</div>
  <div class="card">Card Content</div>
  <div class="card">Card Content</div>
  <div class="card">Card Content</div>
  <div class="card">Card Content</div>
  <div class="card">Card Content</div>
  <div class="card">Card Content</div>
  <div class="card">Card Content</div>
  <div class="card">Card Content</div>
  <div class="card">Card Content</div>
  <div class="card">Card Content</div>
</div>

Количество оставшихся карт, отображаемых при наведении курсора на стрелки, необязательно.Просто стрелки, которые управляют прокруткой, в порядке.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...