网格溢出到下面的div
我正在创建一个个人网站来炫耀我的其他作品，并认为它希望自己重新创建该网站以学习技能。我已经完成了一个“投资组合部分”，该部分使用display: grid创建了多个图块，每个图块都代表我从事的项目。它的工作原理非常好，并且完全符合我的意愿。我现在正在创建联系人部分，但是投资组合区域与我创建的新联系人div重叠，并且不确定原因。任何帮助表示赞赏。
问题图片（通过组合瓷砖的线条应表示接触并位于投资组合下方。我将接触的最小高度设置为800px，从投资组合部分的开头开始，仅显示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>
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？