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

从

中删除position:absolute

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

并在行动中看到here

Answer 2

像这样修改你的设计：

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

CSS底部对齐导致重叠文本

2 个答案: