jquery - 如何自动右/左浮动

Question

我有这个页面负责显示订单，这些订单是在客户下订单后使用 flask 动态生成的。

每个订单都应该在点击后显示附加信息。现在，如果展开的订单在左侧，则其他订单的流程会很顺利。

但是，如果被点击(展开)的顺序在右边，就会发生奇怪的事情......

有谁知道为什么会这样，是否有解决办法？这是代码:

<!-- An Order -->
<div class="an-order">
  <img src="./delivery-truck.png">
  <div>
    <h5 class="">#232451</h5>
  </div>
  <h6>total: $000.00</h6>
  <div class="order-footer">
    <span>expand me</span>
    <span>!</span>
    <hr class="line">
    <!-- Additional Information -->
    <div class="additional-info">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
         eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim 
         ad minim 
         veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
         ex ea 
         commodo consequat. Duis aute irure dolor in reprehenderit in 
         voluptate velit 
         esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
         occaecat 
         cupidatat non proident, sunt in culpa qui officia deserunt mollit 
         anim id 
         est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing 
         elit, qui 
         officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit 
         amet, 
         consectetur adipisicing elit, sed do eiusmod tempor incididunt ut 
         labore et 
         dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
         exercitation 
         ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
         irure 
         dolor in reprehenderit in voluptate velit esse cillum dolore eu 
         fugiat nulla 
         pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
         culpa qui 
         officia deserunt mollit anim id est laborum.</p>
    </div><!-- /.Additional Information -->
  </div>
</div><!-- /.An Order -->
<script src="./jquery-3.3.1.min.js"></script>
<script>
  $( document ).ready(function() {
    // All orders' additional information must be toggled at first
    $(".additional-info").slideToggle(0);
    // Each order's additional information will show on click based on its 
    // $this value!
    $(".an-order").on("click", function () {
      var additionalInfo = $(this)["0"].children[3].childNodes[9]
      $(additionalInfo).slideToggle(1000);
    });
  });
</script>

具有以下样式:

.an-order {
  padding:10px;
  margin:10px;
  width: 286px;
  float: left;

  background:#f1f1f1;
  color:#666;
  border: 2px solid black;
}

.order-footer {
  padding: 0.75rem .75rem;
  display: inline-block;
  width: 90%;

  background-color: rgba(0, 0, 0, 0.05);
  border-top: 1px solid rgba(0, 0, 0, 0.125);
}

Answer 1

这里的问题是导致问题的 div 的 height 和 float。并且仅使用 css 无法解决此问题。

但是另一种方法是您可以使用 column-count 对于这种布局(您需要为此更改 HTML 标记)...

...或者另一种使用 jQuery 库的方法，比如

• > Masonry
• > Isotope
• > Salvattore