时间戳

首页 > 解决方案 > 使用 css 在 3 列和 3 行中显示项目

css - 使用 css 在 3 列和 3 行中显示项目

问题描述

如何进行 3x3 数据显示？我正在使用 foreach 循环显示数据，这是输出： 在此处输入图像描述

这是我的 Blade.php 代码

<div class="coupon_div">
            @foreach($coupons as $coupon)
            <div class="column coupon_col">
                <div class="coupon_cont pad">
                    <div class="coupon_details">
                        <h3 class="column_title coupon_title">
                            <span class="bullets">◼ </span>
                            {{ $coupon->name }}
                        </h3>
                        <p class="column_text coupon_text"> {{ $coupon->description }} </p>
                        <button class="btn_gold btn-coupon" type="button" name="button" onclick="window.open('{{ $coupon->file_path }}')"> Open </button>
                    </div>
                </div>
            </div>
            @endforeach
        </div>

我的 CSS

.coupon_div {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
.column {
  width: 345px;
  height: auto;
  background-color: white;
  position: relative;
}
.coupon_col {
  padding: 0;
  margin-bottom: 30px;
}
.coupon_cont {
  width: 345px;
}
.coupon_col .pad {
  padding: 0;
}
.coupon_details {
  padding: 32px;
  border: 1px solid #dcdcdc;
}

如果我只显示 3 个项目，则它具有适当的间距。我的预期输出是这样的：

在此处输入图像描述

我怎样才能使用 css 获得这个结果？因为结果显示，它仅在 1 行中显示数据。我在这里发现了一些几乎相同的问题，但不知何故无法使其工作。

标签： csslaravel-blade

解决方案

感谢您的回答:) 我已经弄清楚了。我刚刚从以下位置删除了部分coupon_div课程：

.coupon_div {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

至：

.coupon_div {
  justify-content: space-between;
  margin-bottom: 5px;
}

并添加了一些检查：

<div class="column coupon_col {{ $key % 3 == 1 ? 'addmargin' : '' }}">

因此，如果该项目位于第 2、5 和 7 号，它将与其他 2 个项目有一个边距。

.addmargin {
  margin: 0px 15px;
}

现在有了这个，我可以得到我想要的结果。

推荐阅读