如何获得下面的按钮div

  • Z时代
  • 2024-01-10
  • 分类：问答

我一直试图让这个按钮下面的div，但我不知道什么地方出了问题。该按钮应该位于页面正下方。如何获得下面的按钮div

我试着修改z-index，改变CSS，使内联块的按钮，把块放在一个单独的div和修改该div，但到目前为止，没有什么是真正的工作。

问题的图像

* {  
    background-color: rgba(0, 0, 0, 0.1);  
}  
.header {  
    font-family: arial;  
    text-align: center;  
}  
.recent_projects {  
    position: absolute;  
    width: 100%;  
    text-align: center;  
}  
.container {  
    height: 400px;  
    width: 250px;  
    display: inline-block;  
    padding-left: 75px;  
    padding-right: 75px;  
    padding-top: 50px;  
    text-align: justify;  
    overflow: hidden;  
}  
#box1 {  
    float: left;  
}  
#box2 {  
    margin: 0 auto;  
}  
#box3 {  
    float: right;  
}  
.recentProjectImages {  
    height: 200px;  
    width: 250px;  
}  
/*--Button--*/  
.button {  
    border-radius: 4px;  
    background-color: #0466D4;  
    border: none;  
    color: #FFFFFF;  
    display: block;  
    text-align: center;  
    font-size: 28px;  
    padding: 20px;  
    width: 200px;  
    transition: all 0.5s;  
    cursor: pointer;  
    margin: auto;  
    position: relative;  
}

<div class="header">  
    <h1>Recent Projects</h1>  
</div>  
<section class="recent_projects">  
    <div id="box1" class="container">  
    <img class="recentProjectImages" src="placeholder.png" alt="placeholder">  
    <p>Lorem ipsum dolor sit amet</p>  
    </div>  
    <div id="box2" class="container">  
    <img class="recentProjectImages" src="placeholder.png" alt="placeholder">  
    <p>Lorem ipsum dolor sit amet</p>  
    </div>  
    <div id="box3" class="container">  
    <img class="recentProjectImages" src="placeholder.png" alt="placeholder">  
    <p>Lorem ipsum dolor sit amet.</p>  
    </div>  
</section>  
<button class="button"><span>Details</span></button>

回答：

这是因为你在<section>标签了position: absolute。不知道为什么你有，但是，消除它给你所期望的结果：

* {  
    background-color: rgba(0, 0, 0, 0.1);  
}  
.header {  
    font-family: arial;  
    text-align: center;  
}  
.recent_projects {  
    /* position: absolute; /* Remove this! */  
    width: 100%;  
    text-align: center;  
}  
.container {  
    height: 400px;  
    width: 250px;  
    display: inline-block;  
    padding-left: 75px;  
    padding-right: 75px;  
    padding-top: 50px;  
    text-align: justify;  
    overflow: hidden;  
}  
#box1 {  
    float: left;  
}  
#box2 {  
    margin: 0 auto;  
}  
#box3 {  
    float: right;  
}  
.recentProjectImages {  
    height: 200px;  
    width: 250px;  
}  
/*--Button--*/  
.button {  
    border-radius: 4px;  
    background-color: #0466D4;  
    border: none;  
    color: #FFFFFF;  
    display: block;  
    text-align: center;  
    font-size: 28px;  
    padding: 20px;  
    width: 200px;  
    transition: all 0.5s;  
    cursor: pointer;  
    margin: auto;  
    position: relative;  
}

<div class="header">  
    <h1>Recent Projects</h1>  
</div>  
<section class="recent_projects">  
    <div id="box1" class="container">  
    <img class="recentProjectImages" src="placeholder.png" alt="placeholder">  
    <p>Lorem ipsum dolor sit amet</p>  
    </div>  
    <div id="box2" class="container">  
    <img class="recentProjectImages" src="placeholder.png" alt="placeholder">  
    <p>Lorem ipsum dolor sit amet</p>  
    </div>  
    <div id="box3" class="container">  
    <img class="recentProjectImages" src="placeholder.png" alt="placeholder">  
    <p>Lorem ipsum dolor sit amet.</p>  
    </div>  
</section>  
<button class="button"><span>Details</span></button>

预览

以上是 如何获得下面的按钮div 的全部内容， 来源链接： utcz.com/qa/259545.html

回到顶部