Question

我创建了一个带有引导程序的网格，并且在其中一列中我想要一个div网格。每个div悬停时都应该变大，并且应该越过周围的div。

divs中包含图像和文本。移动设备上应有3个div（一个高于另一个，每个“行”中为一个div），而3个“行”中的3个div则在较大的屏幕上内联。我通过将以下类放在包含前面提到的bootstrap div上来实现这一点：col d-flex flex-column flex-md-row。

<div class="container">
  <div class="row">
    <div class="col-lg-3">
      <p>Place for some other content</p>
    </div>
    <div class="col-lg-9 ">
      <div class="row">
        <div class="col d-flex flex-column flex-md-row justify-content- 
around">
          <div class="image-container">
            <div class="left">
               <img src="./img/flag.png" alt="">                     
            </div>
            <div class="main">
              <img src="some image" alt="">
              <p>Some text</p>                       
            </div>
            <div class="lower">
              <button class="btn">Link me</button>
            </div>
           </div> 
             /* two more .image-container divs */   
         </div>
       </div> 
      /* two more times the same: div.row, div.col.d-flex etc.*/                  
     </div>
   </div>           
 </div>

主要要点是：每个具有图像的div的侧面都有两个隐藏的div，因此，当您将鼠标悬停在div上时-div种类会扩展（隐藏的div得到display：块），并且其内容遍历div左边和底部（我已经设置了z-index），而不会移动周围的div。一切都按我的意愿进行，除了我在其中设置了弹性列方向的移动设备上。 div根本不会向底部扩展，而只会向左扩展。底部的隐藏div悬停在父对象上方，而不是在下面的下方元素上方。

SCSS：

.col-lg-3 {
display: none;
@media only screen and (min-width: 992px) {
    display: flex;
}
}

.image-container {
    margin:15px;   
    width: 250px;
    position: relative;
    .main {
        padding: 0 10px;        
        border: 1px solid black;
    }
    .lower {
        display: none;
        position: absolute;
        background-color: white;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 21%;
        border: 1px solid black;
        border-top: none;
        padding: 0 10%;
        button {
            width: 100%;
            background-color: orange;
            color: white;
        }
    }
    .left {
        display: none;
        position: absolute;
        background-color: gray;
        left: -50px;
        top: 0;
        height: 100%;
        width: 50px;
        border: 1px solid black;
        border-right: none;
        img {
            width: 50%;
            margin: auto;
        }
    }
    &:hover {
        z-index:1;
        height: 115%;
        .lower, .left {
            display: block;
        }
    }
  }

为什么会发生这种情况，以及如何使它按预期的方式工作。另外，如果您对创建这些悬停的div的其他可行解决方案有任何建议，我将非常高兴。

Answer 1

如果我正确理解了您的问题，那么您是否希望就地增加图块的大小而不影响其他图块的布局。如果是，那么我创建了一个小提琴HERE。

这使用flexbox和scale变换来增加就地图块的大小。

.container {
  width: 600px;
  height: 400px;
  background-color: #eee;
  border: 1px solid #aaa;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.tile {
  border: 1px solid #888;
  height: 190px;
  width: 190px;
}

.tile:hover {
  transform: scale(1.3);
}

<div class="container">
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
</div>

更好的方法是使用CSS grids。它将使您可以在工作区周围均匀分布瓷砖。

如何在flexbox flex-column类div中将高度设置为高于100％？

1 个答案: