javascript - Div 未按预期显示

Question

嗨，大家好，我正在尝试从左侧测试表创建一张幻灯片，但它没有正确显示，它一排有两张幻灯片，但第三张幻灯片代替了第四张幻灯片，第三张幻灯片的空间留空CSS:

*,
*:before,
*:after {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
/*clearfixes*/

.cf:before,
.cf:after {
  content: " ";
  display: table;
}

.cf:after {
  clear: both;
}

.main-container {
  background: #fff;
  max-width: 1000px;
  line-height: 170%;
  margin: 25px auto 25px auto;
  position: relative;
}

.container_scroll {
  position: relative;
  padding: 25px;
}
/*animation element*/

.animation-element {
  opacity: 0;
  position: relative;
}
/*animation element sliding left*/

.animation-element.slide-left {
  opacity: 0;
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  -moz-transform: translate3d(-100px, 0px, 0px);
  -webkit-transform: translate3d(-100px, 0px, 0px);
  -o-transform: translate(-100px, 0px);
  -ms-transform: translate(-100px, 0px);
  transform: translate3d(-100px, 0px, 0px);
}

.animation-element.slide-left.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}
/*animation slide left styled for testimonials*/

.animation-element.slide-left.testimonial {
  float: left;
  width: 47%;
  margin: 0% 1.5% 3% 1.5%;
  background: #F5F5F5;
  padding: 15px;
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
  border: solid 1px #EAEAEA;
}
.animation-element.slide-left.testimonial:hover,
.animation-element.slide-left.testimonial:active{
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.25);
}

.animation-element.slide-left.testimonial:nth-of-type(odd) {
  width: 48.5%;
  margin: 0% 1.5% 3.0% 0%;
}

.animation-element.slide-left.testimonial:nth-of-type(even) {
  width: 48.5%;
  margin: 0% 0% 3.0% 1.5%;
}

.animation-element.slide-left.testimonial .header{
  float: left;
  width: 100%;
  margin-bottom: 10px;
}
.animation-element.slide-left.testimonial .left{
  float: left;
  margin-right: 15px;
}
.animation-element.slide-left.testimonial .right{
  float: left;
}

.animation-element.slide-left.testimonial img {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  box-shadow: 0px 1px 3px rgba(51, 51, 51, 0.5);
}

.animation-element.slide-left.testimonial h3 {
  margin: 0px 0px 5px 0px;
}

.animation-element.slide-left.testimonial h4 {
  margin: 0px 0px 5px 0px;
}

.animation-element.slide-left.testimonial .content {
  float: left;
  width:100%;
  margin-bottom: 10px;
}

.animation-element.slide-left.testimonial .rating{}

.animation-element.slide-left.testimonial i {
  color: #aaa;
  margin-right: 5px;
}



/*media queries for small devices*/
@media screen and (max-width: 678px){
  /*testimonials*/
  .animation-element.slide-left.testimonial,
  .animation-element.slide-left.testimonial:nth-of-type(odd),
  .animation-element.slide-left.testimonial:nth-of-type(even){
    width: 100%;
    margin: 0px 0px 20px 0px;
  }
  .animation-element.slide-left.testimonial .right,
  .animation-element.slide-left.testimonial .left,
  .animation-element.slide-left.testimonial .content,
  .animation-element.slide-left.testimonial .rating{
    text-align: center;
    float: none;
  }
  .animation-element.slide-left.testimonial img{
    width: 85px;
    height: 85px;
    margin-bottom: 5px;
  }

}

HTML:

  <div class="container_scroll cf">
    <!-- testimonial one -->
    <div class="animation-element slide-left testimonial">
      <div class="header">
        <h3>America's Gold Expert.</h3>
      </div>
      <div class="content"><i class="fa fa-quote-left"></i> Get the proven trust and experience of our Chief Numismatic Consultant Mike Fuljenz. With nearly 40 years in the numismatic field, he is an award-winning author and noted gold expert; he is also considered one of the world's authorities on coin grading and the rare gold coin market. Contact us for free award winning advice and information. <i class="fa fa-quote-right"></i>
      </div>
    </div>
    <!--testimonial two -->
    <div class="animation-element slide-left testimonial">
      <div class="header">
          <h3>Demand Today. Legacy Tomorrow. </h4>
      </div>
      <div class="content"><i class="fa fa-quote-left"></i>Our market makes efforts and innovating book distribution strategies create ongoing education, awareness, and demand for Select Four coin types among collectors and investors today supporting the desirability of your collection for your heirs and the collectors of tomorrow.
        <i class="fa fa-quote-right"></i>
      </div>

    </div>
    <!--testimonial three -->
    <div class="animation-element slide-left testimonial">
      <div class="header">
            <h3>Expert Recommendations.</h3>
      </div>
      <div class="content"><i class="fa fa-quote-left"></i> The artistically acclaimed Gold Eagles are essential to any estate collection of U.S. legal tender coins. For many collectors, the $25 Gold Eagle is the key coin, having the lowest total mintage almost every year since 1986.
        <i class="fa fa-quote-right"></i>
      </div>
    </div>
    <!--testimonial four -->
    <div class="animation-element slide-left testimonial">
      <div class="header">
          <h3>Professional Buying Team.</h3>
      </div>
      <div class="content"><i class="fa fa-quote-left"></i> Having a portfolio buying team in your cornerensures that you get advance word on important high-quality coind as they become available which could save you big money on a vital coin purchase while helpig you fill those tough holes in your sets or collection.
        <i class="fa fa-quote-right"></i>
      </div>

    </div>
     <!--testimonial five -->
    <div class="animation-element slide-left testimonial">
      <div class="header">
          <h3>Specialized Collection Strategies.</h3>
      </div>
      <div class="content"><i class="fa fa-quote-left"></i> With an expert in your corner, you'll learn the "inside track" strategies that have served our customers nationwide in building premier collections and completing sets, while acquiring some of the rarest, select Liberty Double Eagles, Indian gold coins and Commemorative gold coins available today.
        <i class="fa fa-quote-right"></i>
      </div>

    </div>

  </div>

脚本:

  var $animation_elements = $('.animation-element');
var $window = $(window);

function check_if_in_view() {
  var window_height = $window.height();
  var window_top_position = $window.scrollTop();
  var window_bottom_position = (window_top_position + window_height);

  $.each($animation_elements, function() {
    var $element = $(this);
    var element_height = $element.outerHeight();
    var element_top_position = $element.offset().top;
    var element_bottom_position = (element_top_position + element_height);

    //check to see if this current container is within viewport
    if ((element_bottom_position >= window_top_position) &&
        (element_top_position <= window_bottom_position)) {
      $element.addClass('in-view');
    } else {
      $element.removeClass('in-view');
    }
  });
}

$window.on('scroll resize', check_if_in_view);
$window.trigger('scroll');
</script>

Answer 1

这不是问题

clear:left;

每个盒子的高度不同。这就是 float 效果不佳的原因。请设置与最大动画元素高度相关的最小高度