Question

所以我有一个容器，文本后面有一些文字和一个按钮。这个小部件在我的屏幕上重复多次。每个容器的高度根据其内容的高度和自举列设置，因此其宽度也会发生变化。我的问题是我希望按钮始终坚持其窗口小部件的底部，但如果我设置position: absolute; bottom:0; right:25%;，只要窗口小部件宽度不变，它就会居中。它做的。有什么建议吗？

Answer 1

这是你＆＃34; flex＆＃34;能干的朋友。我使用一些任意大小的div用于说明目的：

＆＃13;

div {
  background: pink;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  float: left;
  margin-right: 10px
}

#flexDiv1 {
  height: 200px;
  width: 100px;
}

#flexDiv2 {
  height: 300px;
  width: 70px;
}

#flexDiv3 {
  height: 100px;
  width: 200px;
}

＆＃13;

<div id="flexDiv1">
  <a href="#">link</a>
</div>

<div id="flexDiv2">
  <a href="#">link</a>
</div>

<div id="flexDiv3">
  <a href="#">link</a>
</div>

＆＃13;

Answer 2

检查这是否符合您的要求：

<div class="holder">
  <div class='widget-footer'>
    <button class="btn-inner">
      foo
    </button>
  </div>
</div>



html, body{
  height:100%;
  margin:0;
  padding:0;
}
.holder{
  width: 100%;
  height:100%;
  /*height: 250px;*/
  background: #dedede;
  position:relative;
}
.widget-footer{
  position:absolute;
  bottom:0;
  text-align:center;
  width:100%;
}
.btn-inner{
  margin-bottom: 5px;
}

https://jsfiddle.net/qw54w9j9/2/

Answer 3

易：

CSS

#dinamic {
  position:relative;
  height: 300px;
  background: #ddd;
}
.center-bottom {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  text-align:center
}

HTML

<div id="dinamic">
  <div class="center-bottom">
    <button>Click-me!</button>
  </div>
</div>

https://jsfiddle.net/8pyn4Le4/

如何在动态变化的div的底部中心保留一个按钮？

3 个答案:

CSS