html - 我正在尝试在 1 行中显示 3 列

Question

在我的 shopify 部分中，我试图显示这样的部分，我可以将其添加到我的主页中。

问题是我正在使用带有以下代码的 shopify 液体模式。

logo-list.liquid

<div class="logo-list">
    <h2 class="heading center">{{ section.settings.title }}</h2>

    <div class="logo-container">
        <div class="card">
            {% for block in section.blocks %}
                <a class="logo-link" href="{{ block.settings.link }}">
                    <img loading="lazy" src="{{ block.settings.image | img_url: '1048x1048' }}">
                </a>
                <h3>{{block.settings.title}}</h2>
                <p>{{ block.settings.text }}</p>
            {% endfor %}
        </div>
    </div>
</div>

{% schema %}
{
    "name": "Logo List",
    "max_blocks": 4,
    "settings": [
        {
            "type": "text",
            "id": "title",
            "label": "Heading",
            "default": "Logo List"
        }
    ],
    "blocks": [
        {
            "type": "logo_image",
            "name": "Logo",
            "settings": [
                {
                    "type": "image_picker",
                    "id": "image",
                    "label": "Logo image"
                },
                {
                    "type": "text",
                    "id": "title",
                    "label": "Heading",
                    "default": "Section Heading"
                },
                {
                    "type": "richtext",
                    "id": "text",
                    "label": "Description",
                    "default": "<p>Add your description here</p>"
                },
                {
                    "type": "url",
                    "id": "link",
                    "label": "Logo link",
                    "info": "Optional"
                }
            ]
        }
    ],
    "presets": [
        {
           "name": "Logo list",
           "category": "Image",
           "blocks": [
                {
                    "type": "logo_image"
                },
                {
                    "type": "logo_image"
                },
                {
                    "type": "logo_image"
                },
                {
                    "type": "logo_image"
                }
           ] 
        }
    ]
}

{% endschema %}

这是我制作的scss，我不明白为什么它不像上图那样显示。

.logo-container {
    display: flex;
    text-align: justify;
    flex-direction: row;


    padding-top: 50px;
}

.card {
    flex-direction: row;
}

.logo-link {
    max-width: 25%;
    justify-content: center;
    margin: 0 auto;


    img {
        width: 50%;
    }
}

这就是我得到的：

当我希望它显示为一行时，我不知道为什么它显示为一堆垂直列。

任何帮助表示赞赏。

Answer 1

.logo-container { 
  display: flex; 
  flex-wrap: wrap 
} 

.card { 
  width: 220px; 
  padding:1em;
  text-align:center; 
}

<div class="logo-list"> 
<h2 class="heading center"> sectiontitle</h2> 
  <div class="logo-container"> 
    <div class="card"> 
      <a class="logo-link" href="{{ block.settings.link }}"> 
      <img loading="lazy" src="https://via.placeholder.com/150"> 
      </a> 
      <h3>title</h3> 
      <p>text</p> 
    </div> 
    <div class="card"> 
      <a class="logo-link" href="{{ block.settings.link }}"> 
        <img loading="lazy" src="https://via.placeholder.com/150"> 
      </a> 
      <h3>title</h3> 
      <p>text</p> 
    </div> 
    <div class="card"> 
      <a class="logo-link" href="{{ block.settings.link }}"> 
      <img loading="lazy" src="https://via.placeholder.com/150"> 
      </a> 
      <h3>title</h2> 
      <p>text</p> 
    </div> 
  </div> 
</div>

我已经使用 codeEditer 添加了解决方案，检查这是否适合您

Answer 2

将它放在一行中并循环遍历 cols

    <div class="logo-container">
     <div class="card">
      <div class="row">
        //start of loop
        <div class="col-4">
          //insert content here
        </div>
        //end of loop
     </div>
    </div>