Блог

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

Мне нужно, чтобы элементы разбивались на 2 или 3 элемента в зависимости от размера экрана.

Это может быть достигнуто (afaik) 2 способами.

• Контейнер div с 6 разделениями, каждый из которых имеет свой собственный класс, помогающий им работать с мобильными размерами.

• неупорядоченный горизонтальный список с классами в элементах списка, чтобы помочь им разбиться там, где я хочу.

Как мне определить, какой здесь «правильный» вариант? Какой метод мне выбрать? Или это действительно не имеет значения?

Используйте списки (li), а не div.

Если проблема заключается только в получении макета, вы можете использовать либо div, либо li .

Но я бы предпочел li над div, поскольку для меня это выглядит как список вещей. Таким образом, чтобы сохранить семантику моего кода, я перейду к спискам. HTML обладает способностью отображать списки объектов, и это помогает роботу Google, программам чтения с экрана и всем другим устройствам, которые не полагаются на представление сайта, лучше понимать ваш контент.

Учитывая тот факт, что у вас есть пошаговый шаблон, вы можете легко использовать упорядоченный список в качестве контейнера. ol > li(1/6%) > h3 img p

• Нет элемента HTML по умолчанию с нужным вам стилем.
• Вам придется изменить какой-то произвольный другой элемент, чтобы достичь того, чего вы хотите.
• На самом деле не имеет значения, какой элемент вы используете в качестве отправной точки для создания нужного стиля.
• Поэтому единственное различие заключается в семантическом на уровне HTML; что было бы наиболее полезным представлением содержимого без какого-либо стиля вообще, исключительно из его значения …?

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

Если вы используете bootstrap, вы можете использовать приведенный ниже код, в противном случае вы можете использовать (список li), его проще исправить css.

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-2 col-sm-3 col-xs-12 text-center">
      image-1
    </div>
    <div class="col-md-2 col-sm-3 col-xs-12 text-center">
      image-2
    </div>
    <div class="col-md-2 col-sm-3 col-xs-12 text-center">
      image-3
    </div>
    <div class="col-md-2 col-sm-3 col-xs-12 text-center">
      image-4
    </div>
    <div class="col-md-2 col-sm-3 col-xs-12 text-center">
      image-5
    </div>
    <div class="col-md-2 col-sm-3 col-xs-12 text-center">
      image-6
    </div>
  </div>

</div>