對齊頁面底部的兩個按鈕

Question

我必須對齊頁面底部的兩個按鈕，但我無法做到。一個是「gallery」按鈕，另一個是icon 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，這將確保按鈕出現在視口的底部在

任何時候都見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; 
}