为什么我的 div 会下降到它们应该在的位置以下？

Question

我正在尝试为我网站上的页面开发一个新布局，诚然，考虑到我的技能水平，这是一个雄心勃勃的计划。下面是 link 我到目前为止所取得的成就，但我遇到了这个问题，当您单击欢迎行下方的项目框时，它会执行我期望的所有操作，除了与另一个保持水平调整大小的 div。如果你尝试一下就会明白我的意思。

http://flightsimsoc.co.uk/indexTest.php

我在这里没有使用任何复杂的 javascript，（事实上，我的方法很糟糕且效率低下，但在我学到更多知识并可以用更少的代码实现相同的效果之前，基本上只是一个替代品），它只是一堆编辑 div 样式的行。所以我认为问题显然是 css - 这个问题上周左右一直困扰着我，所以我只是想如果有人有时间看一下，两个脑袋比一.

提前致谢

Answer 1

您正在尝试将框缩小到 3% 宽度，而其中的内容仍试图放入其中。您需要为您的项目框添加溢出，以使其在缩小时不会溢出。

.projectBoxes {
    width: 25%;
    display: inline-block;
    padding: 0;
    margin: 0;
    height: 20.5vh;
    color: #222;
    transition: 0.4s;
    cursor: pointer;
    overflow: hidden;
}

可能还应该在视觉上隐藏折叠框中的内容，以便它们在折叠时不显示，假设这是所需的效果。

Answer 2

    .projectBoxes {
       vertical-align: top;
    }

为什么我的 div 会下降到它们应该在的位置以下？

why do my divs drop down below where they should be?

html

javascript

css

php

responsive