CSSで列内の分割カードを防止する

Question

2つの列でタイムラインを作成しています。私が持っている問題は、下の画像に示すように、1枚のカードが2つの列に分割されていることです。どうすればこの問題を解決できますか？ここであなたは私の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

あなたはdiv要素を破る防ぐために.cardでbreak-inside: avoid;を追加する必要がなく、影に問題があります。

.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>