使用 CSS 防止列中的拆分卡

Question

我正在制作一个包含两列的时间轴。我遇到的问题是一张卡片分为两列，如下图所示。我该如何解决这个问题？这是我的 SCSS 和 HTML 代码。

.card-col-2 {
  @media (min-width: 980px) {
    column-count: 2;
    column-gap: 100px;
    column-fill: auto;
    column-rule-style: solid;
    column-fill: auto;
  }

  @media (max-width: 980px) {
    column-count: 1;
    column-gap: 100px;
    column-fill: auto;
    column-rule-style: solid;
    column-fill: auto;
  }
  padding: 20px;

  .card {
    background-color: #fff;
    border: 1px solid gray;
    border-radius: 5px;
    padding: 15px;
    box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
    box-sizing: content-box;
    margin: 20px 0;
    height:150px;

    .pointer {
      border: 1px solid gray;
      width: 30px;
      height: 30px;
      transform: rotate(45deg);
      position: relative;
      z-index: -1;
      background-color: white;
    }

    .pointer-left {
      left: -30px;
      top: 5px;
    }
    .pointer-right {
      left: 470px;
      top: 5px;
    }
  }
}

<div class="card-col-2">
    <div class="card">
        <div class="row">
            <div class="col-md-8">
                <h2 class=""><i class="fa fa-graduation-cap fa-fw"></i> NMCT @ HoWest</h2>
                <p>Van September 2014 tot heden</p>
            </div>
            <div class="col-md-4">
                <img src="images/nmct.jpg" class="img-responsive"/>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="row">
            <div class="col-md-8">
                <h2 class=""><i class="fa fa-graduation-cap fa-fw"></i> VDO Analyst programmeur @ Syntra West</h2>
                <p>Van September 2014 tot heden</p>
            </div>
            <div class="col-md-4">
                <img src="images/syntra.jpg" class="img-responsive"/>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="row">
            <div class="col-md-8">
                <h2 class=""><i class="fa fa-child fa-fw"></i> Geboren</h2>
                <p>Op 7 Januarie 1994</p>
            </div>
            <div class="col-md-4">
            </div>
        </div>
    </div>
</div>

Answer 1

您必须在 .card 中添加 break-inside: avoid; 以防止破坏 div 但阴影存在问题。

.card-col-2 {
  padding: 20px;
}
@media (min-width: 980px) {
  .card-col-2 {
    column-count: 2;
    column-gap: 100px;
    column-fill: auto;
    column-rule-style: solid;
    column-fill: auto;
  }
}
@media (max-width: 980px) {
  .card-col-2 {
    column-count: 1;
    column-gap: 100px;
    column-fill: auto;
    column-rule-style: solid;
    column-fill: auto;
  }
}
.card-col-2 .card {
  background-color: #fff;
  border: 1px solid gray;
  border-radius: 5px;
  padding: 15px;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
  box-sizing: content-box;
  margin: 20px 0;
  height: 150px;
  break-inside: avoid;
}
.card-col-2 .card .pointer {
  border: 1px solid gray;
  width: 30px;
  height: 30px;
  transform: rotate(45deg);
  position: relative;
  z-index: -1;
  background-color: white;
}
.card-col-2 .card .pointer-left {
  left: -30px;
  top: 5px;
}
.card-col-2 .card .pointer-right {
  left: 470px;
  top: 5px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-col-2">
    <div class="card">
        <div class="row">
            <div class="col-md-8">
                <h2 class=""><i class="fa fa-graduation-cap fa-fw"></i> NMCT @ HoWest</h2>
                <p>Van September 2014 tot heden</p>
            </div>
            <div class="col-md-4">
                <img src="images/nmct.jpg" class="img-responsive"/>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="row">
            <div class="col-md-8">
                <h2 class=""><i class="fa fa-graduation-cap fa-fw"></i> VDO Analyst programmeur @ Syntra West</h2>
                <p>Van September 2014 tot heden</p>
            </div>
            <div class="col-md-4">
                <img src="images/syntra.jpg" class="img-responsive"/>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="row">
            <div class="col-md-8">
                <h2 class=""><i class="fa fa-child fa-fw"></i> Geboren</h2>
                <p>Op 7 Januarie 1994</p>
            </div>
            <div class="col-md-4">
            </div>
        </div>
    </div>
</div>

Answer 2

我也遇到了这个问题。这是一个简单的修复：

只需将：display: inline-block;应用到卡上。

注意： 文档特别警告不要使用 break-inside: avoid：

To prevent cards breaking across columns, we must set them to display: inline-block as column-break-inside: avoid isn’t a bulletproof solution yet.[1]

https://getbootstrap.com/docs/4.0/components/card/#card-columns

使用 CSS 防止列中的拆分卡

Prevent split cards in columns with CSS

html

css

sass

css-multicolumn-layout