Предотвращать раздельные карты в столбцах с помощью CSS

Question

Предотвращать раздельные карты в столбцах с помощью CSS

Я делаю график с двумя столбцами. Проблема в том, что одна карта разделена на два столбца, как показано на рисунке ниже. Как я могу решить эту проблему? Здесь у вас есть код 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>

введите описание изображения здесь

html,css,sass,css-multicolumn-layout,

0

Ответов: 1

HTML, CSS, дерзость, CSS-многоколончатого-макет,

Похожие вопросы

score 1 · Accepted 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>