jquery - 文本的位置相对和绝对高度问题

Question

问题是当我在 slider 中使用更多文本时；文本与按钮重叠；请看第二张图片:

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 插件。请为我提供解决方案。 请参阅链接 http://staging.privateproperties.com.au/

Answer 1

备选方案 1: 没有动态高度。当您减小长引号上的字体大小时，您可以为文本容器增加更多宽度。这样它会减少不到 4 行。

备选方案 2: jQuery循环有before和after两种回调方法。您可以使用 before 方法计算文本容器的高度并添加肉丸的高度。结果是整个容器的高度。您可以在每次 slider 更改之前对其进行修改。

$('#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);
}

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