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

Posted 2023-03-05

【中文标题】如何确保出现在第一列下方的行移动到顶部的第二列

【英文标题】：How do I make sure the line that appears under the first column is moved to the second column on top

【发布时间】：2018-05-18 04:02:38

【问题描述】：

我创建了一个响应式砌体，以使用 css 内联块（参考 - http://w3bits.com/css-masonry/）在页面上显示一些引号。

我遇到的问题是，不知何故，属于第 2 行和第 3 行第一个元素的顶部边框分别出现在第 1 行和第 2 行的末尾。

在这里查看我的小提琴预览 - 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" >
      </div>
    </div>

【参考方案1】：

原因是您使用 CSS 列来划分内容。下一列的一部分（第一项的 box-shadow 的顶部）正在上一列的底部显示。

添加一些上边距以允许这个额外的阴影：

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

看看这个： https://fiddle.jshell.net/v1r1g05p/