Question

目前在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>行下面的页面底部...

Answer 1

试试这个：

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

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

此代码将使ul成为一个flex容器并允许子元素换行。

每个子元素的初始宽度为21％（flex-basis: 21%）。这允许每行最多四个项目。如果该行有任何额外空间，则会使用flex-grow: 1消耗。

我没有使用flex-basis: 25%的唯一原因是因为我不知道你是否有边距，填充或边框，这可能导致第四项包裹。如果适合你，你可以把它变成25％。

浏览器支持：所有主流浏览器except IE < 10均支持Flexbox。最近的一些浏览器版本，例如Safari 8和IE10，需要vendor prefixes。要快速添加前缀，请使用Autoprefixer。 this answer中的更多详细信息。

Shopify Dev - 在行中显示博客文章

1 个答案: