位置相对＆amp;文本的绝对高度问题

Question

问题是当我在滑块中使用更多文本时;文字与按钮重叠;请看第二张图片：

HTML：

<ul>                
    <li>
        <blockquote></blockquote>
        <p></p>
    </li>
    <li>
        <blockquote></blockquote>
        <p></p>
    </li>
    <li>
        <blockquote></blockquote>
        <p></p>
    </li>
</ul>

我的CSS：

ul {
    position: relative;
    height: 100%;
}
li {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 95;
    opacity: 0;
    display: none;
    height: 100%;
}

注意：我不想要固定高度解决方案。我正在使用jQuery Cycle Plugin。请为我提供解决方案。 请参阅链接http://staging.privateproperties.com.au/

Answer 1

备选方案1： 没有动态高度。当你减少长引号的字体大小时，你可以为文本容器添加更多的宽度。这样它将少于4行。

备选方案2： jQuery循环前后有两个回调方法。您可以使用before方法计算文本容器的高度并添加肉丸的高度。结果是整个容器高度。您可以在每次更改滑块之前修改它。

$('#some-cycle').cycle({ 
    before:  onBefore, 
    after:   onAfter 
 });

function onBefore() { 
    //Assuming html elements
    var textHeight = $('#textContainer').height(),
        meatballs = $('#meatballs').height(),
        sumHeights = textHeight + meatballs;
    $('#cycle-wrapper-container').height(sumHeights);
}

您可以为高度设置动画以实现更好的过渡。