в настоящее время пытаюсь добавить горизонтальную прокрутку к различным разделам в галерее изображений.Укладка в вертикальном положении только после достижения ширины - PullRequest
Новая
       25

в настоящее время пытаюсь добавить горизонтальную прокрутку к различным разделам в галерее изображений.Укладка в вертикальном положении только после достижения ширины

0 голосов
/ 28 декабря 2018

В настоящее время я работаю над галереей изображений, где у меня есть различные разделы, которые имеют несколько изображений.В настоящее время я пытаюсь настроить каждый раздел изображений на одну строку и горизонтальную прокрутку, аналогичную тому, что делает netflix.Прямо сейчас я не смог заставить контейнер переполниться в x для работы и вместо этого перешел ко второй строке.

Я попытался использовать пробел: nowrap overflow-x: auto;overflow-y: скрытый;

display: inline-block;

Я также попытался взять содержащийся div для списка и повернуть его на 90 градусов и разрешить вертикальную прокрутку, а затем повернуть дочерний элементdiv back.

Лучшее, что я смог получить для эффекта, который я пытаюсь добиться, - это второй пример, но я не смог получить правильную ширину для вмещающей оболочки.Я пытаюсь перебрать всю строку.

Первый пример.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>list testing</title>

    <style>
      body {
        background-color: #2e2e2e;
        margin: 0px;
        padding: 0px;
        color: white;
      }

      .galleryContainer {
        width: 100%;
        margin: 0px;
        text-align: center;
      }

      .gallery {
        width: 90%;
        text-align: center;
        margin: 0% 5% 0% 5%;
      }

      .sectionWrapper {
        width: 100;
        height: 100%;
        overflow-y: auto;
        overflow-x: auto;
      }

      .section {
        height: 100%;
        width: 100%;
        display: inline-block;
        text-align: center;
        margin: 0px;
        padding: 0.75% 0 0.75% 0;
      }

      ul > .gallery {
        float: left;
        white-space: nowrap;
        overflow-x: auto;
      }

      ul > li {
        list-style-type: none;
        display: inline;
      }

      li {
        float: left;
        width: 250px;
        height: 200px;
        margin-left: 1%;
        margin-top: 1%;
        border: 1px solid #999999;
        background-color: #203d68;
        display: inline;
      }

      li:hover {
        filter: grayscale(100%);
        transform: scale(1.1);
        box-shadow: 4px 4px 4px #222222;
        transition: 0.5s ease;
      }

      h2 {
        display: inline-block;
        font-family: Arial, Helvetica, sans-serif;
      }
    </style>
  </head>
  <body>
    <div class="galleryContainer">
      <div class="gallery">
        <div class="sectionWrapper">
          <div class="section">
            <h2>section 1</h2>
            <ul>
              <li>test_1</li>
              <li>test_2</li>
              <li>test_3</li>
              <li>test_4</li>
              <li>test_5</li>
              <li>test_6</li>
              <li>test_1A</li>
              <li>test_2A</li>
            </ul>
          </div>
        </div>

        <div class="sectionWrapper">
          <div class="section">
            <h2>section 2</h2>
            <ul>
              <li>test_7</li>
              <li>test_8</li>
              <li>test_9</li>
              <li>test_10</li>
              <li>test_11</li>
              <li>test_12</li>
            </ul>
          </div>
        </div>

        <div class="sectionWrapper">
          <div class="section">
            <h2>section 3</h2>
            <ul>
              <li>test_13</li>
              <li>test_14</li>
              <li>test_15</li>
              <li>test_16</li>
              <li>test_17</li>
              <li>test_18</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Второй пример 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>list testing</title>

    <style>
      body {
        background-color: #2e2e2e;
        margin: 0px;
        padding: 0px;
        color: white;
      }

      .galleryContainer {
        width: 100%;
        margin: 0px;
        text-align: center;
      }

      .gallery {
        width: 90%;
        text-align: center;
        margin: 0% 5% 0% 5%;
      }

      .sectionWrapper {
        width: 100;
        height: 100%;
        overflow-y: auto;
        overflow-x: auto;
        transform: rotate(-90deg);
        /* transform-origin: right top; */
      }

      .section {
        height: 100%;
        width: 100%;
        display: inline-block;
        text-align: center;
        margin: 0px;
        padding: 0.75% 0 0.75% 0;
        transform: rotate(90deg);
        /* transform-origin: right top; */
      }

      ul > .gallery {
        width: 100%;
        height: 100%;
        float: left;
        display: inline;
      }

      ul > li {
        list-style-type: none;
        display: inline;
      }

      li {
        float: left;
        width: 250px;
        height: 200px;
        margin-left: 1%;
        margin-top: 1%;
        border: 1px solid #999999;
        background-color: #203d68;
        display: inline;
      }

      li:hover {
        filter: grayscale(100%);
        transform: scale(1.1);
        box-shadow: 4px 4px 4px #222222;
        transition: 0.5s ease;
      }

      h2 {
        display: inline-block;
        font-family: Arial, Helvetica, sans-serif;
        width: 100%;
        margin-top: 0;
        margin-bottom: 0;
      }
    </style>
  </head>
  <body>
    <div class="galleryContainer">
      <div class="gallery">
        <div class="sectionWrapper">
          <div class="section">
            <h2>section 1</h2>
            <ul>
              <li>test_1</li>
              <li>test_2</li>
              <li>test_3</li>
              <li>test_4</li>
              <li>test_5</li>
              <li>test_6</li>
              <li>test_1A</li>
              <li>test_2A</li>
            </ul>
          </div>
        </div>

        <!-- <div class="section">
          <h2>section 2</h2>
          <ul>
            <li>test_7</li>
            <li>test_8</li>
            <li>test_9</li>
            <li>test_10</li>
            <li>test_11</li>
            <li>test_12</li>
          </ul>
        </div>

        <div class="section">
          <h2>section 3</h2>
          <ul>
            <li>test_13</li>
            <li>test_14</li>
            <li>test_15</li>
            <li>test_16</li>
            <li>test_17</li>
            <li>test_18</li>
          </ul>
        </div> -->
      </div>
    </div>
  </body>
</html>

Во втором экзамене я получаю скроллинг, который я ищу, но не ширину.Любая помощь приветствуется.

1 Ответ

0 голосов
/ 28 декабря 2018

Вы можете добавить фиксированную ширину к вашей обертке .section вместо 100%, например: 1000px

Оба display: inline-block и float: left обнаружат, есть ли рядом с ними пробелы, поэтому вы должны установитьКонтейнер фиксированной ширины.

...