Nano Hash - криптовалюты, майнинг, программирование

Shopify Dev - Отображение сообщений в блоге в строках

В настоящее время на моей странице блога в Shopify статьи блога отображаются в UL как элементы списка, один за другим вниз по странице.

Я хотел бы, чтобы они отображались в строках по 4. В настоящее время у меня есть код:

<ul id="blog-articles" class="desktop-4 tablet-4 mobile-2">
    {% for article in blog.articles %}
    <li class="single-article">

      <div class="article-body desktop-12">
        <h2><a href="{{ article.url }}">{{ article.title }}</a></h2>

        <a href="{{ article.url }}">
        <div class="article-content">
          {% if article.image %}<img class="article-image" src="{{ article.image | img_url: 'grande' }}" alt="{{ article.title }}">{% endif %}
        <div class="clear"></div>
        </div> 
        </a>
      </div>
    </li>
    {% endfor %}
  </ul> 

Итак, статьи явно зациклены, но я не знаю, как отображать их слева направо, по 4 в каждой строке...

Мой сайт находится здесь: https://www.okuhstudios.com/blogs/news и мой новый код появляется внизу страницы под всеми <hr> строками...

17.03.2017

Ответы:


1

Попробуй это:

#blog-articles {
    display: flex;
    flex-wrap: wrap;
}

.single-article {
    flex: 1 0 21%; /* flex-grow, flex-shrink, flex-basis */
}

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

Каждому дочернему элементу дается начальная ширина 21% (flex-basis: 21%). Это позволяет не более четырех элементов в строке. Если в строке есть дополнительное пространство, оно используется с flex-grow: 1.

Единственная причина, по которой я не использовал flex-basis: 25%, заключается в том, что я не знаю, есть ли у вас поля, отступы или границы, которые могут привести к переносу четвертого элемента. Вы можете сделать это 25%, если это работает для вас.


Поддержка браузеров: Flexbox поддерживается всеми основными браузерами, кроме IE ‹ 10. Для некоторых последних версий браузеров, таких как Safari 8 и IE10, требуются префиксы поставщиков. Для быстрого добавления префиксов используйте Autoprefixer. Подробнее читайте в этом ответе.

17.03.2017
Новые материалы

Кластеризация: более глубокий взгляд
Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..

Как написать эффективное резюме
Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..

Частный метод Python: улучшение инкапсуляции и безопасности
Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..

Как я автоматизирую тестирование с помощью Jest
Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..

Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..

Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..

Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..