Question

我有一个带CSS的主要div：

.border {
 border-radius: 25px;
 border: 8px solid #2C3E50;
 padding: 50px;
 width: 500px;
 height: 500px;
 margin: 0 auto;
 display: flex;
 justify-content: center;
 align-items: center;
}

两个按钮，并排，在div内部，使用CSS使其在悬停/按下时具有动画效果。无论div中的内容是什么，我如何使按钮位于div的底部？职位：绝对，不适合我。

Answer 1

尝试位置：绝对或相对，然后改变底部和右侧属性。

另外，您是否检查过以确保没有其他样式覆盖您的首选样式？ Chrome的开发者工具是一种很棒的方式来解决这个问题。

Answer 2

html：

<div id="wrapper">
  <button></button>
</div>

您可以申请样式：

#wrapper { 
  position: relative; 
}
#wrapper > button { 
    position: absolute;
    bottom: 0; 
}

将<button>元素放在包装器<div>的底部。请注意，您必须在position: relative的包含元素（包装器）上声明position: absolute或position: absolute，以放置相对于其底部的子元素（按钮）。

Answer 3

试试这个

＆＃13;

.border {
    border-radius: 25px;
    border: 8px solid #2C3E50;
    padding: 50px;
    width: 500px;
    height: 500px;
    margin: 0 auto;
    position: relative;
}

.inner-border-normal {
  float: left;
}

.inner-border-bottom {
  position: absolute;
  bottom: 50px;
}

.button {
    width: 100px;
    height: 32px;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    background: #F2F2F2;
    cursor: pointer;
}

＆＃13;

<div class="border">

  <div class="inner-border-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id erat interdum ex dapibus sodales nec id nibh. Sed egestas bibendum erat quis ultricies. Ut auctor iaculis odio quis tempor. In maximus nisi et ex consectetur scelerisque. Nam et nunc sit amet massa faucibus commodo. Etiam at tortor nisl. Integer at justo sit amet ex ornare rutrum a sed felis. Mauris eu risus dolor. Curabitur non ullamcorper lacus. Curabitur ultricies aliquet ex, non maximus erat convallis eget. Nulla pretium ex quis commodo tempus. Nunc non vestibulum neque, vitae venenatis lorem. Nunc eget maximus ante. Sed aliquam ac arcu sed pharetra.</div>

  <div class="inner-border-bottom">
    <input type="button" class="button" value="Press">
    <input type="button" class="button" value="Press">
  </div>

</div>

＆＃13;

将Div中的按钮对齐到底部

3 个答案: