css - 对齐页面底部的两个按钮

Question

我必须对齐页面底部的两个按钮，但我做不到。一个是按钮“图库”，另一个是图标 linkedin。

<div class="container fill">
 <div id="myCarousel" class="carousel slide">
  <div class="carousel-inner">
  <div class="item">    
    <div class="fill" style="background-image:url('http://www.mysite/images/category/image.jpg');background-position: center;">
   <div class="container">
  <div class="carousel-caption">
      <h1>TITLE</h1>
      <p class="lead">Description</p>
    </div> 
</div>
 <div class="pull-right">
  <a class="btn btn-large btn-primary" href="categories.php?id=17">View Gallery</a>
 </div>
  </div>
   </div>
     </div>
 <div class="pull-left">
  <div class="social-caption">
      <button class="btn btn-large btn-linkedin">
       <i class="icon-linkedin"></i><span><a style="color:white" vhref="http://www.linkedin.com/"> | Linkedin</span></button>
      </div>

两个按钮的CSS:

.social-caption {
  background-color: transparent;
  position: relative;
  max-width: 100%;
  padding: 0 20px;
  bottom: 45px;
  left: 5px;
}


.gallery-button { 
  background-color: transparent; 
  position: relative;
  max-width: 100%;
  padding: 0 20px; 
  bottom: 45px;
  right: 5px;
}

这两个按钮没有对齐。尤其是在移动设备上会出现此问题

解决方案？谢谢

Answer 1

你可以做类似 THIS 的事情，例如。它使用 position:absolute 将按钮定位在页面内容的底部 (bottom:0) - 或者相对于它们的父定位(在本例中为 body。另一种方法是使用 position:fixed，这将确保按钮始终显示在视口(viewport)的底部。

查看 absolute positioning 之间的区别和 fixed positioning .

HTML

<button>Button 1</button>
<button>Button 2</button>

CSS

body{
    position:relative;
}
button{
    position:absolute;
    bottom:0;        
}
button:last-child{
    left:100px;
}