Как сделать так, чтобы квадраты прокручивались подряд в мобильном представлении в формате html / css? - PullRequest
Новая
       7

Как сделать так, чтобы квадраты прокручивались подряд в мобильном представлении в формате html / css?

0 голосов
/ 29 мая 2018

У меня есть скриншот ниже, который я скопировал в скрипку .В скрипте я создал родительский div, в котором я упомянул все 2 строки: 

<div class="product-all-contents">

<div class="product-contents">
</div>

<div class="product-contents">
</div>

</div>

enter image description here

Постановка задачи:

Я хочу сделать отдельную прокрутку строк в представлении для мобильного телефона / планшета .Коды CSS, которые я пытался сделать для прокрутки, выглядят так, как будто это не работает.Нужно ли также устанавливать минимальную ширину, чтобы прокручивать строки в режиме просмотра с мобильного телефона или планшета?

@media only screen and (max-width: 767px)
{
.product-all-contents
{
  overflow-x: auto;
}
}

Ответы [ 2 ]

0 голосов
/ 08 июня 2018

Хорошая идея - фиксировать высоту и ширину поля вместо использования ширины в процентах, поскольку такой макет страницы будет одинаковым на всех экранах, и пользователь также сможет прокручивать отдельные строки продукта по горизонтали

Просто измените ваши правила CSS, как показано ниже. Я изменил ваши правила CSS класса .product и добавил один дополнительный медиа-запрос для горизонтальной прокрутки в строке продукта. 

.product-contents .product {
    min-width: 160px;
    width:160px;
    text-align: center;
    height: 150px;
    border-style: solid;
    border-width: 3px;
    border-color: rgb(145,147,150);
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    margin-left: 10px;
}

@media only screen and (max-width: 767px)
{
  .product-contents{
     overflow-x: auto;
  }
}

Надеюсь, эта работа для вас:)

0 голосов
/ 29 мая 2018
  • 1) Вам нужно установить overflow-x на .product-contents, чтобы он отображал прокрутку на меньшем экране
  • 2) Установите min-width на .product, чтобы он не уменьшилсяна маленьком устройстве
  • 3) Используя селектор :not в .product, установите margin-right так, чтобы пространство между каждым элементом оставалось
  • 4) Удалите white-space из .product-all-contentsв @media only screen and (max-width: 767px), так как сейчас в этом нет необходимости 

.product-contents {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  overflow-x: auto;
}
.product-contents .product {
  width: 10%;
  min-width: 90px;
  text-align: center;
  height: 150px;
  padding-top: 1%;
  padding-left: 1%;
  padding-right: 1%;
  border-style: solid;
  border-width: 3px;
  border-color: rgb(145, 147, 150);
  background-color: white;
  border-radius: 10px
}
.product-contents .product:not(:last-child) {
    margin-right: 15px;
}
.product-contents .product img {
  max-width: 100%;
}

@media only screen and (max-width: 767px)
{
.product-all-contents
{
  overflow-x: auto;
  /*white-space: nowrap;*/
}
}
<div class="product-all-contents">

<div class="product-contents">
  <div class="product"><img src="http://via.placeholder.com/150x150" alt="" /></div>
  <div class="product"><img src="http://via.placeholder.com/150x150" alt="" /></div>
  <div class="product"><img src="http://via.placeholder.com/150x150" alt="" /></div>
  <div class="product"><img src="http://via.placeholder.com/150x150" alt="" /></div>
  <div class="product"><img src="http://via.placeholder.com/150x150" alt="" /></div>
  <div class="product"><img src="http://via.placeholder.com/150x150" alt="" /></div>
  <div class="product"><img src="http://via.placeholder.com/150x150" alt="" /></div>
  <div class="product"><img src="http://via.placeholder.com/150x150" alt="" /></div>
</div>

<div class="product-contents">
  <div class="product"><img src="http://via.placeholder.com/150x150" alt="" /></div>
  <div class="product"><img src="http://via.placeholder.com/150x150" alt="" /></div>
  <div class="product"><img src="http://via.placeholder.com/150x150" alt="" /></div>
  <div class="product"><img src="http://via.placeholder.com/150x150" alt="" /></div>
  <div class="product"><img src="http://via.placeholder.com/150x150" alt="" /></div>
  <div class="product"><img src="http://via.placeholder.com/150x150" alt="" /></div>
  <div class="product"><img src="http://via.placeholder.com/150x150" alt="" /></div>
  <div class="product"><img src="http://via.placeholder.com/150x150" alt="" /></div>
</div>

</div>

Обновленная скрипка Здесь

...