html - 光滑的淡入淡出 div 消失

Question

我需要一个淡入淡出轮播，我有以下代码:

HTML

<div class="flash-container">
  <div class="documentsItem">
    <a href="" id="lnkDocuments">
      <div class="itemtitle" id="divTitle">Title 1</div>
    </a>
  </div>
  <div class="documentsItem">
    <a href="" id="lnkDocuments">
      <div class="itemtitle" id="divTitle"> Title 2</div>
    </a>
  </div>

  <div class="documentsItem">
    <a href="" id="lnkDocuments">
      <div class="itemtitle" id="divTitle"> Title 3</div>
    </a>
  </div>
</div>

CSS

.flash-container{
    float:right;
    width:555px;
}
.documentsItem 
{
    float:right;
     width:800px;
}
.documentsItem a{
    width:100%;
    float:right;
}
.allitemslink{
    float:right;
}
.slider-parent-doc{
    width:100%;
     float:right;
}

.slick-list {
    margin-top:25px;
    border:solid 1px;
}

.documentsItem a img
{
    width:30px;
    height:30px;
    float:right;
}
.documentsItem a .itemtitle{
    float:right;
    padding-right:10px;
}

JavaScript

$('.flash-container').slick({
  autoplay: true,
  autoplaySpeed: 1000,
  fade: true,
  infinite: true
});

当这段代码运行时，它只显示带有淡入淡出效果的 Title2。另一个元素根本没有显示。我需要像轮播一样显示所有 div。我究竟做错了什么？谢谢。

Answer 1

问题好像是

float: right;

从 css 中删除它后，淡入淡出效果正常。问题可以关闭