첫 번째 열 아래에 나타나는 줄이 맨 위에있는 두 번째 열로 이동하는지 확인하려면 어떻게합니까?

Question

CSS 인라인 블록 (ref - http://w3bits.com/css-masonry/)을 사용하여 페이지에 몇 개의 따옴표를 표시하는 반응 형 석조물을 만들었습니다.

내가 겪고있는 문제는 제 2 행과 제 3 행의 첫 번째 요소에 속하는 상단 경계가 각각 첫 번째 행과 두 번째 행의 끝에 나타납니다.

미리보기 여기 내 바이올린을 참조하십시오 - 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

이유 존재가 당신이 컨텐츠를 분할하는 CSS 열을 사용하는 것입니다. 다음 열의 일부 (첫 번째 항목의 상자 그림자 상단)가 이전 열의 맨 아래에 표시됩니다.

이 여분의 그림자 수 있도록 약간의 상단 여백에 추가

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

확인이 아웃 : https://fiddle.jshell.net/v1r1g05p/