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标记）... < / p>

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

如何自动右/左浮动

1 个答案: