如何获得下面的按钮div

我一直试图让这个按钮下面的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>

来源

2017-12-03 RejectEd27

@kevin我会建议你使用，引导。这将是更容易，并会给予反应良好。 –

谢谢兄弟！我会考虑的！ – RejectEd27

@ RejectEd27找到解决方案。不知道你是否需要这个。你能否快速检查，并让我知道，如果这就是你的期望？ –

这是因为你在<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>

预览

来源

2017-12-03 05:14:18

如何获得下面的按钮div

回答

相关问题