Предотвращать раздельные карты в столбцах с 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

Вы должны добавить break-inside: avoid; в .card, чтобы предотвратить сломать 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>