按钮未与覆盖的showcase Box CSS/HTML底部对齐_Html_Css

按钮未与覆盖的showcase Box CSS/HTML底部对齐

html css

按钮未与覆盖的showcase Box CSS/HTML底部对齐,html,css,Html,Css,“我的展示”框中的按钮未与各自展示框的底部对齐。它们会随着文本数量的不同而改变位置。我尝试了很多东西，也进行了很多搜索。我试过位置：绝对；边缘底部：5px；但是他们从盒子里跳了出来预期结果是按钮位于showcase框的底部，例如5px向上，但在showcase框内居中对齐我有一个黑色背景的展示柜，然后是3个展示柜。每个框都有一个h3、para和按钮以下是指向我的垃圾箱的链接： HTML是： <!DOCTYPE html> <html> <head>

“我的展示”框中的按钮未与各自展示框的底部对齐。它们会随着文本数量的不同而改变位置。我尝试了很多东西，也进行了很多搜索。我试过位置：绝对；边缘底部：5px；但是他们从盒子里跳了出来

预期结果是按钮位于showcase框的底部，例如5px向上，但在showcase框内居中对齐

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

以下是指向我的垃圾箱的链接：

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>

我添加了相对于.showcase框的位置，然后创建了一个div，将其设置为绝对位置，居中并定位其中的元素，以包含button button是一个内联元素，即使在div中设置为绝对位置，也可能存在定位问题

.展示{ 宽度：100%；最小高度：300px；背景色：4784B0；文本对齐：居中； } .展示箱{ 保证金权利：1%；左缘：1%；利润率最高：5%；利润底部：5%；最小高度：250px；背景色：F0；显示：内联表；宽度：30%；框大小：边框框；边界半径：15px；盒影：10px 18px 18px 004372；填充物：5px；文本对齐：居中；位置：相对位置； } .展示箱h3 a{ 字体系列：“Roboto”，无衬线；字体大小：粗体；字号：1em；文字装饰：无；颜色：黑色； /*颜色：黑色；*/ } .展示箱p{ 字体系列：“Roboto”，无衬线；字体大小：.9em；颜色：黑色； } .展示按钮{ 位置：绝对位置；宽度：100%；左：0；底部：15px； } .showcase按钮>按钮{ 字体系列：“Roboto”，无衬线；字体大小：1.1米；字体大小：正常；边界：无；背景色：6161；填充：10px；左侧填充：30px；右侧填充：30px；颜色：白色；边界半径：10px；文本对齐：左对齐；最小宽度：100px；盒影：2件2件3件黑色； } .showcase按钮>按钮：悬停{ 背景色：fb4833；颜色：白色； } Lorem ipsum dolor sit amet，圣公会领袖，sed。

从这里开始。。。 Lorem ipsum Door sit amet，是一位杰出的领导者，他是一位临时的领导者。

了解更多。。。 Lorem ipsum dolor sit amet。

下一步。。。

非常感谢@K.C。

.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;
    }