Question

当我单击div时，我希望它们全部位于同一位置，该位置在div内容的右侧和下方，但是它们与我单击的div放在同一位置如果它们都放在彼此的小盒子中，那是有道理的。我不完全确定如何让他们全部移至右侧并停留在那里。

<div class="col-md-4">
 <div class="card mb-4 shadow-sm">
<div class="content">
  <div class="description">
    The First Album[1989]
  </div>
</div>
<div class="about-section">
  <p class="album">The First Album[1989]</p>
  <p>bands’ classic first record, produced by Mellisa Madrid with Floor, Jake Baker, Keifer Leblanch and Adrian Sherwood.</p>
  <div id="albumlist">
    <p>Tracklist </p>
    <ol class="albumlist">
      <li>Yes</li>
      <li>No</li>
      <li>Idk</li>
      <li>Can you repeat the question?</li>
     </ol>
   </div>
 </div>
 </div>
</div>
<div class="col-md-4">
 <div class="card mb-4 shadow-sm">
   <!-- <img class="card-img-top" src="images/album1.jpg"> -->
</div>
 <div class="content">
   <div class="description">
  The Second Album[1990]
</div>
 </div>
  <div class="about-section">
    <p class="album">The Second Album[1990]</p>
  <p>bands’ classic first record, produced by Mellisa Madrid with Floor, Jake Baker, Keifer Leblanch and Adrian Sherwood.</p>
  <div id="albumlist">
    <p>Tracklist </p>
    <ol class="albumlist">
      <li>Yes</li>
      <li>No</li>
      <li>Idk</li>
      <li>Can you repeat the question?</li>
    </ol>
  </div>
  </div>

  </div>


 <div class="col-md-4">
 <div class="card mb-5 mb-4 shadow-sm">
  </div>
    <div class="content">
<div class="description">The Third Album[1990]</div>
 </div>
    <div class="about-section">

  <p class="album">The Third Album[1990]</p>
  <p>bands’ classic first record, produced by Mellisa Madrid with Floor, Jake Baker, Keifer Leblanch and Adrian Sherwood.</p>
  <div id="albumlist">
    <p>Tracklist </p>
    <ol class="albumlist">
      <li>Yes</li>
      <li>No</li>
      <li>Idk</li>
      <li>Can you repeat the question?</li>
    </ol>
  </div>
</div>

$(function() {
  $('.description').click(function() {
    $(this).closest('.content').siblings('.about-section').toggle(1000);
  })
})

Answer 1

您更适合使用flexbox执行此操作。这是一个示例：

$(function() {
  $('.description').click(function() {
    $(this).closest('.content').siblings('.about-section').toggle(1000);
  })
})

.about-section{
  display:none;
 }

.wrapper {
  display: flex;
}

.wrapper > div {
  flex: 0 0 33.33%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wrapper">
<div class="col-md-4">
  <div class="card mb-4 shadow-sm">
    <!-- <img class="card-img-top" src="images/album2.jpeg"> -->
    <div class="content">
      <div class="description">
        The First Album[1989]
      </div>
    </div>
    <div class="about-section">
      <!-- <p id="p1"><img class="float-left" src="images/album2.jpeg" style="width: 500px; height:500px"></p> -->
      <p class="album">The First Album[1989]</p>
      <p>bands’ classic first record, produced by Mellisa Madrid with Floor, Jake Baker, Keifer Leblanch and Adrian Sherwood.</p>
      <div id="albumlist">
        <p>Tracklist </p>
        <ol class="albumlist">
          <li>Yes</li>
          <li>No</li>
          <li>Idk</li>
          <li>Can you repeat the question?</li>
        </ol>
      </div>
    </div>
  </div>
</div>
<div class="col-md-4">
  <div class="card mb-4 shadow-sm">
    <!-- <img class="card-img-top" src="images/album1.jpg"> -->
  </div>
  <div class="content">
    <div class="description">
      The Second Album[1990]
    </div>
  </div>
  <div class="about-section">
      <!-- <p id="p1"><img class="float-left" src="images/album2.jpeg" style="width: 500px; height:500px"></p> -->
      <p class="album">The Second Album[1990]</p>
      <p>bands’ classic first record, produced by Mellisa Madrid with Floor, Jake Baker, Keifer Leblanch and Adrian Sherwood.</p>
      <div id="albumlist">
        <p>Tracklist </p>
        <ol class="albumlist">
          <li>Yes</li>
          <li>No</li>
          <li>Idk</li>
          <li>Can you repeat the question?</li>
        </ol>
      </div>
    </div>

</div>


<div class="col-md-4">
  <div class="card mb-5 mb-4 shadow-sm">
    <!-- <img class="card-img-top" src="images/town.jpg"> -->
  </div>
  <div class="content">
    <div class="description">The Third Album[1990]</div>
  </div>
      <div class="about-section">
      <!-- <p id="p1"><img class="float-left" src="images/album2.jpeg" style="width: 500px; height:500px"></p> -->
      <p class="album">The Third Album[1990]</p>
      <p>bands’ classic first record, produced by Mellisa Madrid with Floor, Jake Baker, Keifer Leblanch and Adrian Sherwood.</p>
      <div id="albumlist">
        <p>Tracklist </p>
        <ol class="albumlist">
          <li>Yes</li>
          <li>No</li>
          <li>Idk</li>
          <li>Can you repeat the question?</li>
        </ol>
      </div>
    </div>
</div>
</div>

如何将下拉div放置在正确的位置？

1 个答案: