CSS底部對齊導致重疊的文本

Question

我有一個關於將元素對齊到另一個底部的絕對和相對位置的問題。我已經設置了這個http://jsfiddle.net/sitrobotsit/xLahG/8/來說明這個問題。基本上，底部對齊的元素與它上面的文本重疊。

HTML

<div class="subevents"> 
     <ul id="events_gallery"> 
     <li class="events_column"> 
      <img src="http://placekitten.com/130/100"> 
      <h3>Some heading</h3>     
      <p>Some vairable length text. Sed ut perspiciatis 
      unde omnis iste natus error sit voluptatem accusantium.</p> 
      <p class="bottom"><a href="#">Overlapping link</a></p> 
     </li> 
    </ul> 
</div>​ 

CSS

#events_gallery li { 
    border: solid 1px #999; 
    list-style-type: none; 
    position: relative; 
    width: 295px; 
} 

#events_gallery li p, #events_gallery li h3 { 
    left: 139px; 
} 

#events_gallery li img { 
    float: left; 
} 

#events_gallery li .bottom { 
    vertical-align: bottom; 
    position: absolute; 
    bottom: 0; 
} 

Answer 1

修改ÿ我們的設計是這樣的：

<div class="subevents"> 
     <ul id="events_gallery"> 
     <li class="events_column"> 
      <a href="#"><img src="http://placekitten.com/130/100"></a> 
      <h3>Some heading</h3>     
      <p class="content">Some vairable length text. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. </p> 
      <p class="bottom"><a href="#">Find out more</a></p> 
     </li> 
    </ul> 
</div>​ 

和CSS：

#events_gallery li { 
    border: solid 1px #999; 
    margin: 0 0 5px 0; 
    list-style-type: none; 
    position: relative; 
    width: 295px; 
} 

#events_gallery li p, #events_gallery li h3 { 
    padding: 0; 
    margin: 0 0 4px 139px; 
} 


#events_gallery li p.content { 
    margin-bottom:24px;    
} 

#events_gallery li img { 
    float: left; 
    margin: 0 5px 5px 0; 
    padding: 2px; 
} 

#events_gallery li .bottom { 
    vertical-align: bottom; 
    position: absolute; 
    bottom: 0; 
} 
​ 

你想是這樣的權利

Answer 2

刪除position:absolute從

#events_gallery li .bottom { 
vertical-align: bottom; 
position: absolute; 
bottom: 0; 
} 

，看看它here在行動