Html Cargo 在网格中的排列

发布于04月02日

我有在整个周期中展示的产品卡:

{% for product in products %}
                
        <div class="card">
                <div class="card__top">    
                        <img src="" alt="product img"/>
                </div>
                <div class="card__bottom">
                <div class="card__prices">
                        <div class="card__price card__price--common">Бесплатно</div>
                </div>
                <p>
                        {{ product.name}}
                </p>
                <button class="card__add">Подробнее</button>
                </div>
        </div>
        
{% endfor %}

示例:

<div class="card">
  <div class="card__top">
    <img src="" alt="product img" />
  </div>
  <div class="card__bottom">
    <div class="card__prices">
      <div class="card__price card__price--common">Бесплатно</div>
    </div>
    <p>
      Product 1
    </p>
    <button class="card__add">Подробнее</button>
  </div>
</div>

<div class="card">
  <div class="card__top">
    <img src="" alt="product img" />
  </div>
  <div class="card__bottom">
    <div class="card__prices">
      <div class="card__price card__price--common">Бесплатно</div>
    </div>
    <p>
      Product 2
    </p>
    <button class="card__add">Подробнее</button>
  </div>
</div>

<div class="card">
  <div class="card__top">
    <img src="" alt="product img" />
  </div>
  <div class="card__bottom">
    <div class="card__prices">
      <div class="card__price card__price--common">Бесплатно</div>
    </div>
    <p>
      Product 3
    </p>
    <button class="card__add">Подробнее</button>
  </div>
</div>

现在，卡片显示在1列中，并按到右侧边缘.如何使它们显示在3柱网格中并居中？如果你需要更多的信息，我愿意提供. 如果有任何帮助，我将很高兴.谢谢!

<div class="card-container"> <div class="card"> <div class="card__top"> <img src="" alt="product img" /> </div> <div class="card__bottom"> <div class="card__prices"> <div class="card__price card__price--common">Бесплатно</div> </div> <p> Product 1 </p> <button class="card__add">Подробнее</button> </div> </div> <div class="card"> <div class="card__top"> <img src="" alt="product img" /> </div> <div class="card__bottom"> <div class="card__prices"> <div class="card__price card__price--common">Бесплатно</div> </div> <p> Product 2 </p> <button class="card__add">Подробнее</button> </div> </div> <div class="card"> <div class="card__top"> <img src="" alt="product img" /> </div> <div class="card__bottom"> <div class="card__prices"> <div class="card__price card__price--common">Бесплатно</div> </div> <p> Product 3 </p> <button class="card__add">Подробнее</button> </div> </div> </div>

<style> .card-container { display: flex; justify-content: center; } .card { margin: 10px; } </style>  <div class="card-container"> {% for product in products %} <div class="card"> <div class="card__top"> <img src="" alt="product img"/> </div> <div class="card__bottom"> <div class="card__prices"> <div class="card__price card__price--common">Бесплатно</div> </div> <p> {{ product.name}} </p> <button class="card__add">Подробнее</button> </div> </div> {% endfor %} </div>

Html Cargo 在网格中的排列

推荐答案

Html相关问答推荐

我需要主页按钮出现在中间

窗口对象中是否有对<；html&>根元素的引用？

禁用与行分开的边框折叠span

如何让QML`Text`元素内的链接在悬停时显示鼠标指针？

如何在htmlAngular 17的@for中使用索引

如何阻止Chromecast图标出现在HTML5视频

创建带有弯曲边框的水平时间线

仅向上扩展并以最大高度滚动的Div

Div中的图像问题-(TailWind CSS中的网格)

平移变换下的SVG剪辑路径行为

在R中从网页上的特定iframe中提取图形数据

为什么字体大小而不是 colored颜色属性适用于元素？

如何在css中在span中绘制圆弧？

rmarkdown HTML数字不适用于针织衫_1.44

悬停时宽度从 0 过渡到自动

在HTML请求中添加源URL

白色栏超出页面100%的右侧

两个span，一个在div居中，好像没有另一个，另一个在右边

是否可以将文本添加到表格边框？

下拉菜单项在页面加载时显示，需要隐藏直到悬停