Divが期待通りに表示されない

Question

HI People左の睾丸からスライドを作成しようとしていますが、正しくは来ないのですが、2行1列ですが、3番目が4番目の場所にあり、3番目の場所が左の空白 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

これは

の問題ではありませんクリア：左;

各ボックスの高さが異なります。フロートはうまく機能しません。 最大のアニメーション要素の高さに関連する最小の高さを設定してください

Answer 2

は、私は、これはあなたが後にしている表情である100％わからないんだけど、あなたが追加した場合：

.animation-element.slide-left.testimonial:nth-of-type(odd) { clear: left; } 

を私はあなたが近づくと思います。