Question

$(".logo").hover(function() {
  $(this).closest('.partner').find('.info').slideDown();
}, function() {
  $('.info').slideUp();
});

#partnerBox {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}

.partner {
  flex-basis: 25%;
  background-color: grey;
  margin: 20px;
  box-shadow: 0 10px 40px 0px #00000014;
}

.logo {
  height: 150px;
}

.info {
  background-color: lightgrey;
  height: 100px;
  display: none;
}

<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="partnerBox">
  <div class="partner">
    <div class="logo"></div>
    <div class="info"></div>
  </div>
  <div class="partner">
    <div class="logo"></div>
    <div class="info"></div>
  </div>
  <div class="partner">
    <div class="logo"></div>
    <div class="info"></div>
  </div>
  <div class="partner">
    <div class="logo"></div>
    <div class="info"></div>
  </div>
  <div class="partner">
    <div class="logo"></div>
    <div class="info"></div>
  </div>
  <div class="partner">
    <div class="logo"></div>
    <div class="info"></div>
  </div>
  <div class="partner">
    <div class="logo"></div>
    <div class="info"></div>
  </div>
  <div class="partner">
    <div class="logo"></div>
    <div class="info"></div>
  </div>
  <div class="partner">
    <div class="logo"></div>
    <div class="info"></div>
  </div>
</div>

我希望该框显示悬停时的额外div（目前此操作）。但是，当它显示div时，我希望它向下推入其列，而不是该行。

我通常可以使用bootstrap列来执行此操作，但我决定坚持使用flex box

https://jsfiddle.net/xpvt214o/915957/

Answer 1

我通过添加“列”包装器解决了该问题。我能找到的最简单的解决方案，也许有一种更好的方法。

如果需要3列，只需添加.col类，然后将该列的内容包装在其中即可。

.col {
  flex: 1;
}

和html：

<div id="partnerBox">
  <div class="col">
    <div class="partner">
      <div class="logo"></div>
      <div class="info"></div>
    </div>
    <div class="partner">
      <div class="logo"></div>
      <div class="info"></div>
    </div>
    <div class="partner">
      <div class="logo"></div>
      <div class="info"></div>
    </div>
   </div>
   <div class="col">
     <div class="partner">
       <div class="logo"></div>
       <div class="info"></div>
     </div>
     <div class="partner">
       <div class="logo"></div>
       <div class="info"></div>
     </div>
     <div class="partner">
       <div class="logo"></div>
       <div class="info"></div>
     </div>
   </div>
   <div class="col">
     <div class="partner">
       <div class="logo"></div>
       <div class="info"></div>
     </div>
     <div class="partner">
       <div class="logo"></div>
       <div class="info"></div>
     </div>
     <div class="partner">
       <div class="logo"></div>
       <div class="info"></div>
     </div>
   </div>
 </div>

工作jsfiddle

请注意，此快速修复程序会破坏您的样式，因此您需要稍微调整一下宽度。

Flex Box列与行

1 个答案: