Как я могу преобразовать макет из трех столбцов в один неупорядоченный список для мобильных устройств? - PullRequest
Новая
       52

Как я могу преобразовать макет из трех столбцов в один неупорядоченный список для мобильных устройств?

0 голосов
/ 05 июля 2018

Я работаю над адаптивной веб-страницей, которая в настоящее время имеет 3 элемента div, содержащих дополнительные элементы div. Они отображаются на экране в виде 3 плавающих столбцов

Однако, когда размер экрана составляет 700px и ниже, я бы хотел, чтобы этот html изменился на неупорядоченный список, а не на 3 плавающих столбца

Я знаю, что вы можете изменить CSS, чтобы он был адаптивным, но возможно ли изменить HTML? (или есть лучший способ достичь желаемого результата?) 

<section id="links">
  <div id="links_1">
    <div>
      <h3>Header 1</h3>
      <p>Text example 1</p>
    </div>
    <div>
      <h3>Header 2</h3>
      <p>Text example 2</p>
    </div>
    <div>
      <h3>Header 3</h3>
      <p>Text example 3</p>
    </div>
    <div>
      <h3>Header 4</h3>
      <p>Text example 4</p>
    </div>
    <div>
      <h3>Header 5</h3>
      <p>Text example 5</p>
    </div>
    <div>
      <h3>Header 6</h3>
      <p>Text example 6</p>
    </div>
  </div>
  <div id="links_2">
    <div>
      <h3>Header 7</h3>
      <p>Text example 7</p>
    </div>
    <div>
      <h3>Header 8</h3>
      <p>Text example 8</p>
    </div>
    <div>
      <h3>Header 9</h3>
      <p>Text example 9</p>
    </div>
    <div>
      <h3>Header 10</h3>
      <p>Text example 10</p>
    </div>
    <div>
      <h3>Header 11</h3>
      <p>Text example 11</p>
    </div>
    <div>
      <h3>Header 12</h3>
      <p>Text example 12</p>
    </div>
  </div>
  <div id="links_3">
    <div>
      <h3>Header 13</h3>
      <p>Text example 13</p>
    </div>
    <div>
      <h3>Header 14</h3>
      <p>Text example 14</p>
    </div>
    <div>
      <h3>Header 15</h3>
      <p>Text example 15</p>
    </div>
    <div>
      <h3>Header 16</h3>
      <p>Text example 16</p>
    </div>
  </div>
</section>

Ответы [ 4 ]

0 голосов
/ 05 июля 2018

У меня похожая ситуация, над которой я работаю, и решил пойти по маршруту flexbox. Вот решение, которое я придумала:

  1. Напишите свой HTML и CSS с мобильным подходом. Это означает, что ваш HTML должен быть одним непрерывным списком; нет ручного разбиения на столбцы. Что-то вроде: 

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    ...
    <li>Item 15</li>
</ul>
  1. Теперь, когда у вас есть правильный список, используйте медиазапросы для изменения свойств при расширении области просмотра: 

@media (min-width: 701px) {
    ul {
        display: flex;
        flex-flow: column wrap;
        height: 9rem;
    }
    
    li {
        width: calc(100% / 3);
    }
}

Теперь к этому добавятся такие вещи, как сброс полей и отступов, изменение размера блока (если необходимо) и т. Д. Главный «недостаток» заключается в том, что вам необходимо указать высоту для списка - в противном случае элементы списка будут продолжайте работать в одном столбце, когда родительский <ul> расширяется, чтобы вместить его содержимое. Только когда элементы списка в родительском элементе исчерпают высоту, они начнут переноситься в другой столбец.

Примечание: это должно работать в IE10 + и во всех других браузерах примерно 3 года и новее.

0 голосов
/ 05 июля 2018

Вы можете просто сделать его отзывчивым даже с html5, добавив стиль etiquete и используя проценты, чтобы адаптировать его быстро 

<section id="links" style="width:50%;height:50%">
  <div id="links_1">
    <div>
      <h3>Header 1</h3>
      <p>Text example 1</p>
    </div>
    <div>
      <h3>Header 2</h3>
      <p>Text example 2</p>
    </div>
    <div>
      <h3>Header 3</h3>
      <p>Text example 3</p>
    </div>
    <div>
      <h3>Header 4</h3>
      <p>Text example 4</p>
    </div>
    <div>
      <h3>Header 5</h3>
      <p>Text example 5</p>
    </div>
    <div>
      <h3>Header 6</h3>
      <p>Text example 6</p>
    </div>
  </div>

  <div id="links_2">
    <div>
      <h3>Header 7</h3>
      <p>Text example 7</p>
    </div>
    <div>
      <h3>Header 8</h3>
      <p>Text example 8</p>
    </div>
    <div>
      <h3>Header 9</h3>
      <p>Text example 9</p>
    </div>
    <div>
      <h3>Header 10</h3>
      <p>Text example 10</p>
    </div>
    <div>
      <h3>Header 11</h3>
      <p>Text example 11</p>
    </div>
    <div>
      <h3>Header 12</h3>
      <p>Text example 12</p>
    </div>
  </div>

  <div id="links_3">
    <div>
      <h3>Header 13</h3>
      <p>Text example 13</p>
    </div>
    <div>
      <h3>Header 14</h3>
      <p>Text example 14</p>
    </div>
    <div>
      <h3>Header 15</h3>
      <p>Text example 15</p>
    </div>
    <div>
      <h3>Header 16</h3>
      <p>Text example 16</p>
    </div>
  </div>
</section>
0 голосов
/ 05 июля 2018

С помощью flexbox и медиа-запроса вы можете решить эту проблему. Если вы хотите изменить HTML, вам все равно понадобится CSS и / или JS, чтобы скрыть / показать указанную HTML-часть. 

#links {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-flow: wrap;
}

#links div {
  flex-grow: 1;
    flex-basis: calc(100% / 3);
    width: calc(100% / 3);
    height: 100%;
}

@media only screen and (max-width: 700px) {
  #links div {
    width: 100%;
    flex-basis: 100%;
    height: auto;
  }
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<section id="links">
  <div id="links_1">
    <div>
      <h3>Header 1</h3>
      <p>Text example 1</p>
    </div>
    <div>
      <h3>Header 2</h3>
      <p>Text example 2</p>
    </div>
    <div>
      <h3>Header 3</h3>
      <p>Text example 3</p>
    </div>
    <div>
      <h3>Header 4</h3>
      <p>Text example 4</p>
    </div>
    <div>
      <h3>Header 5</h3>
      <p>Text example 5</p>
    </div>
    <div>
      <h3>Header 6</h3>
      <p>Text example 6</p>
    </div>
  </div>
  <div id="links_2">
    <div>
      <h3>Header 7</h3>
      <p>Text example 7</p>
    </div>
    <div>
      <h3>Header 8</h3>
      <p>Text example 8</p>
    </div>
    <div>
      <h3>Header 9</h3>
      <p>Text example 9</p>
    </div>
    <div>
      <h3>Header 10</h3>
      <p>Text example 10</p>
    </div>
    <div>
      <h3>Header 11</h3>
      <p>Text example 11</p>
    </div>
    <div>
      <h3>Header 12</h3>
      <p>Text example 12</p>
    </div>
  </div>
  <div id="links_3">
    <div>
      <h3>Header 13</h3>
      <p>Text example 13</p>
    </div>
    <div>
      <h3>Header 14</h3>
      <p>Text example 14</p>
    </div>
    <div>
      <h3>Header 15</h3>
      <p>Text example 15</p>
    </div>
    <div>
      <h3>Header 16</h3>
      <p>Text example 16</p>
    </div>
  </div>
</section>
0 голосов
/ 05 июля 2018

с помощью jquery вы можете обработать событие изменения размера окна как: 

$( window ).resize(function() {
  //
});

вы можете получить элементы и изменить порядок или изменить их внутри функции, css не позволяет изменять html, но если вы хотите сделать это с помощью CSS, прочтите эту статью о css float

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

Похожие темы

...