html - 当我处于特定宽度下时，我的 div 全部堆叠在一起

Question

今天在 CSS 上苦苦挣扎。我有四个盒子，它们具有动态元素，因为如果用户将鼠标悬停在它们上面，它们都会翻转。

我试图让它们更灵敏一些，当我将屏幕宽度缩小到一个特定的小尺寸时，它们都位于彼此之上，这样我只能看到其中一个。理想情况下，我希望将它们分成两行，但我很难做到这一点。

有人有什么想法吗？

我的代码是这样的

<div class="container">
  <div class="row">
    <div class="col-md-3 col-xs-6">
      <div class="threed">
        <div class="item">
          <!-- John Doe
          -->
          <div class="thumb thumb1"></div>
        </div>
        <div class="itemback">
          <div class="item_back_text">
            <h4>John Doe</h4>
            Tattooed snackwave fingerstache, hot chicken typewriter coloring book bicycle rights bitters 
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-3 col-xs-6">
      <div class="threed">
        <div class="item">
          <!-- John Doe
          -->
          <div class="thumb thumb2"></div>
        </div>
        <div class="itemback">
          <div class="item_back_text">
            <h4>John Doe</h4>
            PBR&B jean shorts irony art party. Typewriter glossier seitan kombucha. Art party banh mi skateboard, .
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS 看起来像

.item, .itemback{
  border-style: solid;
  border-color: black;
}

.thumb {
  width: 100%;
  height: 100%;
}

.thumb1 {
    background: url(image1.jpg);
    background-size: 100%;
}

.thumb2 {
    background: url(image2.jpg);
    background-size: 100%;
}

.itemback{
  opacity: .7;
  position: relative;

  .item_back_text {
    color: white;
    // text-align: center;
    font-size: 12px;
    font-weight: bold;
  }
}

.item{
  text-align: center;
  color: white;
  position: relative;
}

.threed > .item{
  position: absolute;
  -webkit-transform: perspective( 600px ) rotateY( 0deg );
  transform: perspective( 600px ) rotateY( 0deg );
  background: #808080; width: 10em; height: 10em; border-radius: 7px;
  -webkit-backface-visiblity: hidden;
  backface-visibility: hidden;
  transition: -webkit-transform .5s linear 0s;
  transition: transform .5s linear 0s;
}

.threed > .itemback{
  position: absolute;
  -webkit-transform: perspective( 600px ) rotateY( 180deg );
  transform: perspective( 600px ) rotateY( 180deg );
  background: black; width: 10em; height: 10em; border-radius: 7px;
  -webkit-backface-visiblity: hidden;
  backface-visibility: hidden;
  transition: -webkit-transform .5s linear 0s;
  transition: transform .5s linear 0s;
}

.threed:hover > .item {
  -webkit-transform: perspective( 600px ) rotateY( -180deg );
  transform: perspective( 600px ) rotateY( -180deg );
}

.threed:hover > .itemback {
  -webkit-transform: perspective( 600px ) rotateY( 0deg );
  transform: perspective( 600px ) rotateY( 0deg );
}

有人知道我做错了什么吗？

Answer 1

因为目前没有任何 div 具有任何实际高度。 .item和 .item-back类(class)有高度，但绝对定位，因此它们不会影响 parent 的高度。

它们实际上被分成两行，但行的高度约为 2 像素，因此它们看起来彼此重叠。

添加.threed { min-height: 250px }你会看到它的行为如你所愿。

您的问题主要来自 .thumb .设置带有背景图像的 div 实际上并没有给它大小(不同于将 <img> 放在 <div> 中)。显式定义 .thumb 的维度或使用 <img> .