Wie stelle ich sicher, dass die Zeile, die unter der ersten Spalte erscheint, in die zweite Spalte verschoben wird

Question

Ich habe ein reaktionsfähiges Mauerwerk erstellt, um einige Zitate auf der Seite mit css inline-block (ref - http://w3bits.com/css-masonry/) anzuzeigen.

Das Problem, das ich habe, ist, dass irgendwie die obere Grenze, die zum ersten Element in der 2. und 3. Reihe gehört, am Ende der 1. und 2. Reihe erscheint.

Siehe meine Geige hier für Vorschau - https://fiddle.jshell.net/8ntahynh/

/*----------------- Testimonials CSS -----------------*/ 
 

 
.masonry { 
 
    margin: 0 0; 
 
    padding: 0; 
 
    font-size: .85em; 
 
    -moz-column-count: 3; 
 
    -webkit-column-count: 3; 
 
    column-count: 3; 
 
} 
 

 
.item { 
 
    display: inline-block; 
 
    background: #fff; 
 
    padding: 1em; 
 
    margin: 0 0 1.5em; 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-shadow: 2px 2px 4px 2px #ccc; 
 
} 
 

 
.testimonial-img, 
 
.center-cropped { 
 
    height: 200px; 
 
    width: 200px; 
 
    object-fit: cover; 
 
    object-position: center; 
 
}

<div class="wrapper"> 
 
    <div class="masonry"> 
 
    <div class="item"> 
 
     <div class="testimonial-section"> 
 
     <blockquote> 
 
      <i class="fa fa-quote-left" aria-hidden="true"></i>My new door looks a lot like my former front door. I got married and raised my children in that house. Good memories! The front door was made of solid oak and we could open the upper part, which 
 
      we did when we talked to our neighbours for example. It was a pity that we had to move out of that house. 
 
      <i class="fa fa-quote-right" aria-hidden="true"></i> 
 
      <div> 
 
      <span class="footer-source">- 
 
          <b>Mw. Louwen | </b>Resident at Pieter van Foreest Weidevogelhof in 
 
          <cite title="Source Title"> Pijnacker</cite> 
 
         </span> 
 
      </div> 
 
     </blockquote> 
 

 
     <img src="https://s3-eu-central-1.amazonaws.com/truedoors/wp-content/uploads/truedoors-thestorybehindthedoor-community-quote-1013.jpg" class="center-cropped" alt="Responsive image"> 
 
     </div> 
 
    </div>

Answer 1

Der Grund dafür ist, dass Sie CSS Spalten werden mit dem Inhalt aufzuteilen. Ein Teil der nächsten Spalte (der obere Teil des Box-Shadows des ersten Elements) wird am Ende der vorherigen Spalte angezeigt.

in einigen oberen Rand hinzufügen für diesen zusätzlichen Schatten zu ermöglichen:

.item { 
    ... 
    margin: .2em 0 1.5em; 
    ... 
} 

Check this out: https://fiddle.jshell.net/v1r1g05p/