个人中心
gpt4 book ai didi

html - 按钮未与重叠展示框 CSS/HTML 的底部对齐

转载 作者：太空宇宙 更新时间：2023-11-04 06:42:29 25 4
gpt4 key购买 nike

我的展示框 中的按钮没有与各自展示框的底部对齐。它们随着其中不同数量的文本改变位置。我已经尝试了很多东西和很多搜索。我试过了 (position: absolute; margin-bottom: 5px;) 但他们直接跳出了他们所在的盒子。

预期结果是按钮位于展示框的底部(比如向上 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/

25 4 0
文章推荐： html - 位置固定不起作用？我究竟做错了什么？
文章推荐： python - 如何在 Windows 8 中拥有合适的 tkinter 窗口？
文章推荐： c - 请帮助我的代码，编译问题
文章推荐： python - 重试 block 内 celery 任务的行为
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com