Question

我现在正在做一个项目，我设置了一个媒体查询，当屏幕为 768 像素时，它会转换为移动布局。不幸的是，我的页面的活动部分有问题。当媒体查询开始时，该部分的所有卡片都应该以 flex 显示，方向为一列。取而代之的是，所有卡片只是相互混搭并重叠，也会导致页脚出现问题。

这就是那段 HTML 代码的样子。

const birthDateValue = 23; // Get value from the form control
const date = new Date();
const year = date.getFullYear() - birthDateValue;
date.setYear(year);

console.log(date.toISOString())

这是在媒体查询开始之前的 CSS 代码部分的样子。

<section class="activities" id="activities">
            <h2 class="section-title">Activites in Marseille</h2>
            <div class="cards-activities">
                <div class="grid-container">
                    <div class="card-activity gi1">
                        <a href="0">
                            <img src="images/activites/4_small/reno-laithienne-QUgJhdY5Fyk-unsplash.jpg" alt="">
                            <h4><b>Old Port</b></h4>
                        </a>
                    </div>

                    <div class="card-activity gi2">
                        <a href="0">
                            <img src="images/activites/4_small/paul-hermann-QFTrLdQIRhI-unsplash.jpg" alt="">
                            <h4><b>Pomegues Fort</b></h4>
                        </a>
                    </div>

                    <div class="card-activity gi3">
                        <a href="0">
                            <img src="images/activites/4_small/kevin-hikari-rV_Qd1l-VXg-unsplash.jpg" alt="">
                            <h4><b>Friol Island</b></h4>
                        </a>
                    </div>
                </div>
                <div class="grid-container">
                    <div class="card-activity gi1">
                        <a href="0">
                            <img src="images/activites/4_small/kilyan-sockalingum-NR8-cBCN3aI-unsplash.jpg" alt="">
                            <h4><b>Calanques National Park</b></h4>
                        </a>
                    </div>

                    <div class="card-activity gi2">
                        <a href="0">
                            <img src="images/activites/4_small/florian-wehde-xW9e8gdotxI-unsplash.jpg" alt="">
                            <h4><b>Notre Dame de la Garde</b></h4>
                        </a>
                    </div>

                    <div class="card-activity gi3">
                        <a href="0">
                            <img src="images/activites/4_small/lena-paulin-wH2-EJoDcV0-unsplash.jpg" alt="">
                            <h4><b>Longchamp Park</b></h4>
                        </a>
                    </div>
                </div>
            </div>

        </section>

这就是媒体查询的样子。

.activities {
    background-color: white;
}

.grid-container {
  display: grid;
  grid-template-areas:
    'Tall Short1'
    'Tall Short2';
  grid-gap: 10px;
  background-color: white;
  padding: 10px;
  margin: 0px;
  max-height: 600px;
}

.card-activity.gi1 { grid-area: Tall; }
.card-activity.gi2 { grid-area: Short1; }
.card-activity.gi3 { grid-area: Short2; }



.grid-container > div {
  background-color: white;
  text-align: center;
  padding: 0px;
  font-size: 10px;
  min-height: 300px;
  height: 100%;
}

.cards-activities {
    display: flex;
}

.card-activity {
    border-radius: 25px;
    width: 80%;
    height: 60%;
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    transition: box-shadow 0.5s ease-in-out;
}

This is what the issue looks like I've put dashed borders around .cards-activities and .grid-container to investigate.

Answer 1

尝试将 .grid-container 中的 max-height 从 600px 更改为 100%，并告诉我们这是否是您正在寻找的结果：

.grid-container {
  display: grid;
  grid-template-areas:
    'Tall Short1'
    'Tall Short2';
  grid-gap: 10px;
  background-color: yellow;
  padding: 10px;
  margin: 0px;
  max-height: 100%;
}

如何防止卡片堆叠在一起？

1 个答案: