Question

有没有办法让文字不上下跳动？我不能使用position：absolute。因为它搞砸了我网站的其余部分。请看这个小提琴：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>

请参阅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）

Answer 2

HTML代码

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.1/slick.min.css"/> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.1/slick.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css"/>
    <script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
    <script src="app2.js"></script>
    <style>
    body {
    background-color: lightblue;
   }
   #slickslide {
       height: 200px;
       background: lightgray;
     }
     #content {
         margin: auto;
         padding: 20px;
         width: 80%;
     }

    </style>
</head>
<body>

  <div id="demo"></div>
<div id=content>  
  <div id="slickslide" slick="">
    <div><p>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></div>
    <div><p>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></div>
    <div><p>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></div>
    <div><p>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></div>
    <div><p>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></div>
  </div>
</div>
</body>
</html>

Javascript代码

$(document).ready(function(){
     $('#slickslide').slick({
         dots: true,
         infinite: true,
         speed: 300,
         autoplay:true,
         autoplaySpeed: 1000,
         slidesToShow: 1,
         slidesToScroll: 1
     });
 });

幻灯片内的文字没有正确排列。看小提琴

2 个答案: