Div не отображается, как ожидалось

Question

HI Люди Я пытаюсь создать слайд из левого testinomial, но он не подходит должным образом, он имеет два в одной строке, а третий - четвертый, а третий - оставить пустым 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; } 

Я думаю, вы получите ближе.