html - 按钮未对准覆盖的展示箱的底部CSS/HTML

我的展示箱中的按钮未与各自的展示箱的底部对齐。它们随着其中不同数量的文本而改变位置。我已经尝试了很多东西和很多搜索。我尝试过（位置：绝对；下限：5像素；），但他们跳出了所装的盒子。

预期的结果是该按钮位于展示箱的底部（例如向上5像素，但在展示箱的中央对齐）

我有一个黑色背景的展示柜，然后是3个展示柜。每个框都有一个h3，para和按钮。

这是我的垃圾箱的链接：https://jsbin.com/hacatebaqe/1/edit?html,css,output

HTML是：

    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
<div class="showcase">
    <div class="showcase-box">
        <h3><a href="getstarted.html">Where do i start?</a></h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed.
        </p>
        <button class="showcase-button">Start Here...</button>
    </div>
<div class="showcase-box">
    <h3><a href="#">Ready for more?</a></h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
    </p>
    <button class="showcase-button">Learn More...</button>
  </div>

<div class="showcase-box">
    <h3><a href="#">Where to next?</a></h3>
    <p>Lorem ipsum dolor sit amet.
    </p>
    <button class="showcase-button">Next steps...</button>

</div>

</body>
</html>

CSS是：

.showcase {
    width: 100%;
    min-height: 300px;
    background-color: #4784B0;

    text-align: center;
}

.showcase-box {
    margin-right: 1%;
    margin-left: 1%;
    margin-top: 5%;
    margin-bottom: 5%;
    min-height: 250px;
    background-color: #f0f0f0;
    display: inline-table;
    width: 30%;
    box-sizing: border-box;
    border-radius: 15px;
    box-shadow: 10px 18px 18px  #004372;
    padding: 5px;
    text-align:center
}

.showcase-box h3 a {

    font-family: 'Roboto', sans-serif;
    font-weight: bolder;
    font-size: 1em;
    text-decoration:none;
    color: black;
    /*color: black;*/

}

.showcase-box p {
    font-family: 'Roboto', sans-serif;
    font-size: .9em;
    color: black;
}


.showcase-button {
    font-family: 'Roboto', sans-serif;
    font-size: 1.1em;
    font-weight: normal;
    border: none;
    background-color: #616161;
    padding: 10px;
    padding-left: 30px;
    padding-right: 30px;
    color: white;
    border-radius: 10px;
    text-align: left;
    min-width: 100px;
    box-shadow:  2px 2px 3px black ;

}

    .showcase-button:hover {
        background-color: #fb4833;
        color: white;
    }

最佳答案

我在relative中添加了位置.showcase-box，然后创建了一个div，将其设置为位置absolute，将元素居中并放置在其中，以包含按钮（按钮是一个内联元素，甚至在定位时也会遇到问题当设置为div中的绝对位置时）

.showcase {
    width: 100%;
    min-height: 300px;
    background-color: #4784B0;
    text-align: center;
}

.showcase-box {
    margin-right: 1%;
    margin-left: 1%;
    margin-top: 5%;
    margin-bottom: 5%;
    min-height: 250px;
    background-color: #f0f0f0;
    display: inline-table;
    width: 30%;
    box-sizing: border-box;
    border-radius: 15px;
    box-shadow: 10px 18px 18px  #004372;
    padding: 5px;
    text-align:center;
   position: relative;
}

.showcase-box h3 a {
    font-family: 'Roboto', sans-serif;
    font-weight: bolder;
    font-size: 1em;
    text-decoration:none;
    color: black;
    /*color: black;*/
}

.showcase-box p {
    font-family: 'Roboto', sans-serif;
    font-size: .9em;
    color: black;

}

.showcase-button {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 15px;
}
.showcase-button > button{
    font-family: 'Roboto', sans-serif;
    font-size: 1.1em;
    font-weight: normal;
    border: none;
    background-color: #616161;
    padding: 10px;
    padding-left: 30px;
    padding-right: 30px;
    color: white;
    border-radius: 10px;
    text-align: left;
    min-width: 100px;
    box-shadow:  2px 2px 3px black ;
}

.showcase-button >button:hover {
    background-color: #fb4833;
    color: white;
}

<div class="showcase">
    <div class="showcase-box">
        <h3><a href="getstarted.html">Where do i start?</a></h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed.
        </p>
        <div class="showcase-button">
      <button>Start Here...</button>
    </div>
    </div>
<div class="showcase-box">
    <h3><a href="#">Ready for more?</a></h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
    </p>
    <div class="showcase-button">
      <button>Learn More...</button>
    </div>
  </div>

<div class="showcase-box">
    <h3><a href="#">Where to next?</a></h3>
    <p>Lorem ipsum dolor sit amet.
    </p>
    <div class="showcase-button"><button>Next steps...</button></div>
</div>

关于html - 按钮未对准覆盖的展示箱的底部CSS/HTML，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53602942/