当我在一个特定的宽度下时，我的div会叠在一起。

Struggling with CSS today. I have four boxes that have a dynamic element to them as they both flip if a user hovers over them.

今天在CSS。我有四个盒子，它们都有一个动态元素，如果用户在上面盘旋，它们都会翻转。

I'm trying to make them a little more responsive, and when I cut the width of my screen to a specific small size they all sit on top of each other so that I can only see one of them. Ideally i'd like them to be split up into two rows, but I'm having trouble doing that.

我试着让他们更有反应，当我把屏幕的宽度缩小到一个特定的小尺寸时，他们就会坐在一起，这样我只能看到其中的一个。理想情况下，我希望它们被分割成两行，但是我在这方面有困难。

Anybody have any ideas?

谁有什么好主意吗?

My code looks like this

我的代码是这样的

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

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

Would anybody have any idea what i'm doing wrong with this?

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

1 个解决方案

#1

Because at the moment none none of the divs have any actual height. .item and .item-back classes have height but are positioned absolutely so they don't affect their parents' height.

因为目前没有任何一个divs有任何实际的高度。item和。item-back类都有高度，但是它们的位置绝对不会影响父母的身高。

They are actually being split into two rows, but to rows of height ~2px so they look on top of each other.

它们实际上被分成了两行，但是高度是2px，所以它们是重叠的。

Add .threed { min-height: 250px } and you'll see it behave how you want.

添加。threed {min-height: 250px}，您将看到它的行为方式。

Your issue mostly comes from .thumb. Setting a div with a background image doesn't actually give it size (unlike putting an <img> in a <div>). Either explicitly define the dimensions of .thumb or use an <img>.

你的问题主要来自。使用背景图像设置div并不会给它带来实际的大小(不像在

中设置 )。要么显式定义.thumb的维度，要么使用 。