html - 如何确保将出现在第一列下方的行移至顶部的第二列

Question

我创建了一个响应式 masonry ，使用 css inline-block (ref - http://w3bits.com/css-masonry/) 在页面上显示一些引号。

我遇到的问题是，属于第 2 行和第 3 行第 1 个元素的上边框以某种方式分别出现在第 1 行和第 2 行的末尾。

在这里查看我的 fiddle 进行预览 - 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/