html - 网格溢出到下面的 div
问题描述
我正在创建一个个人网站来展示我的其他工作，并认为它想自己从头开始构建网站以学习一项技能。我已经完成了一个“作品集部分”，该部分display: grid用于创建多个图块，每个图块代表我从事的一个项目。它工作得很好，完全符合我的要求。我现在正在创建一个联系人部分，但投资组合区域与我创建的新联系人 div 重叠，并且不确定原因。任何帮助表示赞赏。
问题照片（穿过作品集图块的线条应显示联系并放置在作品集下方。我将联系最小高度设置为 800 像素，并且仅显示 150-200，因为它也从作品集部分的开头开始。
我也有设置为隐藏的模态容器，直到单击最终联系代码下方的按钮，但这似乎不是问题，所以我没有发布。
代码：
// ----------------------Portfolio Tile Styles----------------------//
.portfolio{
width: 100%;
background-color: rgb(245,245,245);
}
//Styles for the portfolio buttons
.btn-container{
margin-top:50px;
background-color: rgb(245,245,245);
text-align: center;
}
//Styles to set all portfolio tiles to be initally hidden;
.photogrammetry, .cv, .dev{
display: none;
}
.filter-btn{
padding: 5px 20px;
margin:10px 5px;
border: 2px solid #e31b6d;
color: #e31b6d;
cursor: pointer;
letter-spacing: 1px;
background-color: white;
text-transform: uppercase;
transition:transform .3s;
transition: color .3s;
transition: background-color .3s;
}
.filter-btn:hover{
color:white;
background-color: #e31b6d;
}
.gallery-wrapper{
position: absolute;
width:100%;
display: flex;
background-color: rgb(245,245,245);
}
// Portfolio Gallery Styles
.gallery{
position: relative;
width: 100%;
padding: 0 7%;
overflow: hidden;
margin: 0% 5% 2% 5%;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}
/* The "show" class is added to the filtered elements */
.show {
display: block;
}
.card{
overflow: hidden;
align-items: center;
width: auto;
height: 250px;
margin: 5px;
display: flex;
flex-direction: column;
justify-content: space-around;
background-size: cover;
}
.top-text{
text-align: center;
transform:translateY(-100px);
transition:transform .3s;
}
.card-btn,{
width:50%;
padding: 5px;
text-transform: uppercase;;
letter-spacing: 1px;
background: transparent;
color: #e31b6d;
opacity: 1;
border: 2px solid #e31b6d;
outline: none;
cursor: pointer;
transform:translateY(100px);
transition:transform .3s;
transition: color .3s;
transition: background-color .3s;
}
.card:hover{
.card-btn{
transform: translateY(0px);
}
.top-text{
transform:translateY(0px);
}
}
.card-btn:hover{
color:white;
background-color: #e31b6d;
}
//Tile Backgrounds
.AutoFP {
background: url("../images/portfolioTile/AFP_Tile.png") center no-repeat;
background-size: cover;
}
.fpl-1 {
background: url(https://media.defense.gov/2013/Jul/16/2000032379/-1/-1/0/130628-F-DQ639-002.JPG) center no-repeat;
background-size: cover;
}
.fpl-2 {
background: url("../images/portfolioTile/IS_Tile.jpg") center no-repeat;
background-size: cover;
}
.fpl-3 {
background: url("../images/portfolioTile/Algae_Tile.png") center no-repeat;
background-size: cover;
}
.fpl-4 {
background: url("../images/portfolioTile/AFP_Tile.jpg") center no-repeat;
background-size: cover;
}
.fpl-5 {
background: url("../images/portfolioTile/UCW_Tile.png") center no-repeat;
background-size: cover;
}
.fpl-6 {
background: url("../images/portfolioTile/Portrait_Tile.png") center no-repeat;
background-size: 100%;
background-color: white;
}
.fpl-7 {
background: url("../images/portfolioTile/CamCal_Tile.png") center no-repeat;
background-size: contain;
background-color: white;
}
//Faded Tile Background
.AutoFP:hover{
background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)),url("../images/portfolioTile/AFP_Tile.png") center no-repeat;
background-size: cover;
}
.fpl-1:hover {
background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)),url(https://media.defense.gov/2013/Jul/16/2000032379/-1/-1/0/130628-F-DQ639-002.JPG) center no-repeat;
background-size: cover;
}
.fpl-2:hover {
background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)),url("../images/portfolioTile/IS_Tile.jpg") center no-repeat;
background-size: cover;
}
.fpl-3:hover {
background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)),url("../images/portfolioTile/Algae_Tile.png") center no-repeat;
background-size: cover;
}
.fpl-4:hover {
background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)),url("../images/portfolioTile/AFP_Tile.jpg") center no-repeat;
background-size: cover;
}
.fpl-5:hover {
background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)),url("../images/portfolioTile/UCW_Tile.png") center no-repeat;
background-size: cover;
}
.fpl-6:hover {
background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)),url("../images/portfolioTile/Portrait_Tile.png") center no-repeat;
background-size: 100%;
background-color: rgba(255,255,255,0.7);
}
.fpl-7:hover {
background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)),url("../images/portfolioTile/CamCal_Tile.png") center no-repeat;
background-size: contain;
background-color: rgba(255,255,255,0.7);
}<!---------------------- Portfolio Gallery ---------------------->
<!-- Where the tiles will go shocasing work -->
<div class="portfolio" id="portfolio">
<h1>Projects</h1>
<div class = "btn-container">
<button class="btn active filter-btn" onclick="filterSelection('all')">All</button>
<button class="btn filter-btn" onclick="filterSelection('photogrammetry')">Photogrammetry</button>
<button class="btn filter-btn" onclick="filterSelection('cv')">Computer Vision</button>
<button class="btn filter-btn" onclick="filterSelection('dev')">Developer</button>
</div>
<div class = "gallery-wrapper">
<div class = "gallery">
<!-- Tile 1 -->
<div class = "photogrammetry dev filterDiv">
<div class = "AutoFP card ">
<div class ="top-text">
<h3 class = "card-heading">Automated FlightPlanning</h3>
<span>Electron, Python</span>
</div>
<button class="card-btn" id ="AutoFP">Learn More</button>
</div>
</div>
<!-- Tile 2 -->
<div class = "dev cv filterDiv">
<div class = "fpl-1 card ">
<div class ="top-text">
<h3 class = "card-heading">Change Detection</h3>
<span>OpenCV, Python</span>
</div>
<button class="card-btn" id ="cd">Learn More</button>
</div>
</div>
<!-- Tile 3 -->
<div class = "dev cv filterDiv">
<div class = "fpl-2 card ">
<div class ="top-text">
<h3 class = "card-heading">Image Stitching</h3>
<span>C++, OpenCV</span>
</div>
<button class="card-btn" id ="imgStitch">Learn More</button>
</div>
</div>
<!-- Tile 4 -->
<div class = "dev cv filterDiv">
<div class = "fpl-3 card " >
<div class ="top-text">
<h3 class = "card-heading">Algae Detection</h3>
<span>OpenCV, Python</span>
</div>
<button class="card-btn" id ="AlgDec">Learn More</button>
</div>
</div>
<!-- Tile 5 -->
<div class = "photogrammetry filterDiv">
<div class = "fpl-4 card ">
<div class ="top-text">
<h3 class = "card-heading">Aerial 3D Model</h3>
<span>DJIFlightPlanner, MetaShape </span>
</div>
<button class="card-btn" id ="A3DM">Learn More</button>
</div>
</div>
<!-- Tile 6 -->
<div class = "dev filterDiv">
<div class = "fpl-5 card ">
<div class ="top-text">
<h3 class = "card-heading">University Course Website</h3>
<span>HTML, CSS</span>
</div>
<button class="card-btn" id ="UCW">Learn More</button>
</div>
</div>
<!-- Tile 7 -->
<div class = "photogrammetry filterDiv">
<div class = "fpl-6 card ">
<div class ="top-text">
<h3 class = "card-heading">University Course Website</h3>
<span>Research Paper</span>
</div>
<button class="card-btn" id ="RP">Learn More</button>
</div>
</div>
<!-- Tile 8 -->
<div class = "photogrammetry filterDiv">
<div class = "fpl-7 card ">
<div class ="top-text">
<h3 class = "card-heading">Camera Calibration of "Prosumer" drones</h3>
<span>Journal Article</span>
</div>
<button class="card-btn" id ="JA">Learn More</button>
</div>
</div>
</div>
</div>
</div>
<!---------------------- Contact Page ---------------------->
<div>
<div class = contact-wrapper>
<h1>CONTACT</h1>
</div>
</div>解决方案
推荐阅读
- jvm - 堆转储 - 保留大小循环引用
- python - 试图在 matplotlib 动画上绘制仍然半可见的图像
- azure-devops - 添加“未使用”的 VSTS 任务组参数
- html - 创建具有相同大小图像的响应式弹性框
- assembly - 引导加载程序不断将 eax 添加到 al
- struts2 - Struts2 Action 未调用，但请求到达服务器
- jekyll - jekyll + 液体中的 if 语句创建代码块而不是意图的 html 标签
- java - 将遗留应用程序配置从 HTTPS 更改为 HTTP 后 Spring Security 停止工作
- vue.js - 使用 SVG 文件使用 Vuetify 创建视差效果
- python - 从 Docker 容器内部对潜在的极端 URL 运行 GET 请求是否安全？