javascript - 幻灯片中的文本未正确排列。见 fiddle

Question

有没有办法让文字不上下跳动？我不能使用position:absolute。因为它弄乱了我网站的其余部分。请看这个 fiddle :http://jsfiddle.net/9xn19111/11/

这是 html:

<div id="rotating-item-wrapper">
<div class="rotating-item intro">Text 1</div>
<div class="rotating-item intro">Text 2</div>
<div class="rotating-item intro">Text 3</div>

<p class="slidermwtext"> Lorem ipsum dolor sit amet, 
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut. </p>

请参阅 fiddle 了解 javascript 和 css。

谢谢!

Answer 1

jsfiddle demo

交叉淡入淡出是在淡入淡出的元素上使用 position:absolute; 实现的。
所以是的，您需要将这些标题设置为相互重叠。

#rotating-item-wrapper {
    position: relative;
    height:30px;       /* play with it! */
}
.rotating-item {
    display:none;
    position:absolute; /* needed to X-fade */
    width:100%;        /* needed cause lost due to absolute pos. */
    text-align: center;
    font-size: 25px;
}

如果你想要父元素的灵活高度，遗憾的是你需要使用 javascript(或像 jQuery 这样的库)(参见:Make absolute positioned div expand parent div height)