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

Question

我使用 css 内联块（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/

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

How do I make sure the line that appears under the first column is moved to the second column on top

html

css

wordpress

responsive-design

masonry