Question

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

提前致谢。

function asyncActionCreator () {
  return (dispatch, getState) => {
    dispatch(someAction());

    someAsyncStuff().then(() => {
      dispatch(someOtherAction(getState().foo);
    });
  }
}

function mapDispatchToProps(dispatch) {
  return {
    foo: () => dispatch(asyncActionCreator())
  }
}

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

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我也遇到了这个问题。很容易解决：

只需在卡上套用display: inline-block;。

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

为防止卡片横穿各列，我们必须将其设置为显示：内联阻止列插入：避免不是防弹解决方案呢。[1]

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

使用CSS防止列中的拆分卡

2 个答案: