Question

我在父母中包含元素时遇到问题。老实说，我已经在代码中迷失了自己。如果您访问此处的页面：

您会在标题区域下方看到第一个DIV。在那里，单词和产品元类应该包含在它们的部分中。然而，有些事情发生在他们突然爆发的地方，我无法看到我的问题。

HTML：

<div class="masonry-block masonry-0">
    <div class="masonry-0__skew">

        <div class="wrap">

            <div class="six-left">
                <p>AM I A SLIDER? I'M NOT SURE YET!</p>
            </div>

            <div class="six-right">
                <div class="product-meta bottom">
                    <div class="product-title">
                        PRODUCT TITLE HERE
                    </div>
                    <div class="shop-now btn">
                        SHOP NOW
                    </div>
                </div>
            </div>

        </div>

    </div>
</div>

CSS：

.main {
  padding: 6.25rem 0;
  margin: -2rem 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%), url("http://placehold.it/350x150");
  filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ), url("http://placehold.it/350x150");
  @include media-query(desk) {
    padding: 6.25rem 1rem;
  }
  @include media-query(lap-and-down) {
    padding: 6.25rem 1rem;
  }
}

// Home Page Craziness
.masonry-block {
  position: relative;
  margin-bottom: gutter();
}
.masonry-0 {
  @include span(12);
  @include height(600px);
  background: url("http://wallpoper.com/images/00/44/24/16/bullets-4_00442416.jpg");
  background-size: cover;
  overflow: hidden;
}
.masonry-0__skew {
  &:before {
    content: '';
    position: absolute;
    bottom: 0;
    overflow: visible;
    width: 100%;
    height: 100px;
    background: rgba(0,0,0,0.7);
    transform: skewY(-1deg);
    border-top: 4px solid $green;
    -webkit-backface-visibility: hidden;
    @include media-query(lap-and-down) {
      transform: none;
    }
  }
}
.six-left {
  @include span(6);
  @include media-query(lap-and-down) {
    @include span(12);
  }
}
.six-right {
  @include span(6 last);
  @include media-query(lap-and-down) {
    @include span(12);
  }
}
.masonry-1 {
  @include span(4);
  @include height(400px);
  background: url("http://wallpoper.com/images/00/44/24/16/bullets-4_00442416.jpg");
  background-size: cover;
  @include media-query(lap-and-down) {
    @include span(12);
  }
}
.masonry-2 {
  @include span(8 last);
  @include height(400px);
  background: url("http://wallpoper.com/images/00/44/24/16/bullets-4_00442416.jpg");
  background-size: cover;
  @include media-query(lap-and-down) {
    @include span(12);
  }
}
.masonry-3 {
  @include span(12);
  @include height(400px);
  background: url("http://wallpoper.com/images/00/44/24/16/bullets-4_00442416.jpg");
  background-size: cover;
  margin-bottom: 0;
  @include media-query(lap-and-down) {
    @include span(12);
  }
}
.product-meta {
  margin: 1rem;
}
.product-title {
  font-family: $main-font-fam;
  font-weight: 700;
  color: $white;
}
.bottom {
  position: absolute;
  bottom: 0;
}

更新：我发现问题似乎是应用于我正在使用的Susy网格的浮动。所以我不得不在内包装中添加定位，然后在包含元素中添加一个高度。现在一切似乎都很好。

Answer 1

我发现问题似乎是应用于我使用的Susy网格的花车。所以我不得不在内包装中添加定位，然后在包含元素中添加一个高度。现在一切似乎都很好。

儿童突破父母DIV

1 个答案: