如何在CSS网格中以相同的高度排列按钮?

问题描述 投票:0回答:1

我有一个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;
        }
    }
}
html css web
1个回答
0
投票

你可以用很多方法解决这个问题,但我认为最简单的方法是在你的css文件中添加以下内容。

.project_cards-grid-item {
  display: flex;
  flex-direction: column;
}

.viewProjectBtnContainer {
  margin-top: auto;
}
© www.soinside.com 2019 - 2024. All rights reserved.