css - 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;
}

ここで実際の動作を確認してください