我有一个css网格是这样设置的。
https:/egorchern.github.ioMy_WebDev_PortfolioProjects.html。
我想让按钮在垂直方向上等距离排列。我试过使用position:absolute;但是按钮会被移出框外,因为元素没有被移动到为按钮腾出空间。
编码。
HTML:
<div class="project_cards-grid-item">
<div class="thumbnail">
<img src="Assets/Prj1Preview.PNG">
</div>
<p class="alignCenter">A chess app with different game modes and an AI. Made in C# and WPF</p>
<div class="viewProjectBtnContainer">
<span class="btn">Expand</span>
</div>
</div>
<div class="project_cards-grid-item">
<div class="thumbnail">
<img src="Assets/Prj1Preview.PNG">
</div>
<p class="alignCenter">Something else</p>
<div class="viewProjectBtnContainer">
<span class="btn">Expand</span>
</div>
</div>
<div class="project_cards-grid-item">
<div class="thumbnail">
<img src="Assets/Prj1Preview.PNG">
</div>
<p class="alignCenter">Something else</p>
<div class="viewProjectBtnContainer">
<span class="btn">Expand</span>
</div>
</div>
<div class="project_cards-grid-item">
<div class="thumbnail">
<img src="Assets/Prj1Preview.PNG">
</div>
<p class="alignCenter">Something else</p>
<div class="viewProjectBtnContainer">
<span class="btn">Expand</span>
</div>
</div>
CSS :
#project_cards-grid {
display:grid;
grid-column-gap: 2vw;
grid-row-gap: 40px;
padding:30px;
}
.project_cards-grid-item {
padding:5px;
width:100%;
background-color:white;
position:relative;
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
border: 2px solid rgba(0, 0, 0, 0.125);
border-radius: 0.45rem;
}
.thumbnail {
width:100%;
margin-bottom: 15px;
}
.viewProjectBtnContainer{
margin-bottom:8px;
display:flex;
justify-content:center;
align-items:center;
}
.btn{
cursor:pointer;
position:relative;
padding:10px 20px;
background:white;
font-size:28px;
border-top-right-radius:10px;
border-bottom-left-radius:10px;
transition:all 0.8s;
&:after,&:before{
content:" ";
width:10px;
height:10px;
position:absolute;
border :0px solid #fff;
transition:all 0.8s;
}
&:after{
top:-1px;
left:-1px;
border-top:4px solid black;
border-left:4px solid black;
}
&:before{
bottom:-1px;
right:-1px;
border-bottom:4px solid black;
border-right:4px solid black;
}
&:hover{
border-top-right-radius:0px;
border-bottom-left-radius:0px;
// background:rgba(0,0,0,.5);
// color:white;
&:before,&:after{
width:100%;
height:100%;
// border-color:white;
}
}
}
你可以用很多方法解决这个问题,但我认为最简单的方法是在你的css文件中添加以下内容。
.project_cards-grid-item {
display: flex;
flex-direction: column;
}
.viewProjectBtnContainer {
margin-top: auto;
}