使用JavaScript/jQuery实现Div重排：将每个Banner Div放置到对应Image Div下方

Perfect, let's get this content rearranged exactly as you need. Below are two solid solutions—one using vanilla JavaScript (no libraries required) and another using jQuery for more concise syntax. Both will move each banner right after its matching image, then append any extra banners to the end of the main container, and clear the side container.

Vanilla JavaScript Solution #

This approach uses plain JS, so no external libraries are needed:

// Grab all necessary elements
const mainContainer = document.querySelector('.main');
const sideContainer = document.querySelector('.side');
const images = document.querySelectorAll('.main .img');
const banners = document.querySelectorAll('.side .banner');

// Loop through each image and insert the corresponding banner after it
images.forEach((img, index) => {
  // Only insert if there's a banner at this index
  if (banners[index]) {
    img.after(banners[index]);
  }
});

// Move any remaining banners to the end of the main container
for (let i = images.length; i < banners.length; i++) {
  mainContainer.appendChild(banners[i]);
}

// Clear out the now-empty side container
sideContainer.innerHTML = '';

How it works: #

1. First, we select all the containers and elements we need to manipulate.
2. We iterate over each image, checking if there's a matching banner at the same index. If yes, we use the after() method to place the banner directly after the image.
3. Any banners left (where the index is higher than the number of images) get appended to the bottom of the main container.
4. Finally, we empty the side container to remove leftover markup.

jQuery Solution #

If you're already using jQuery in your project, this shorter version will do the same job:

$(document).ready(function() {
  const $images = $('.main .img');
  const $banners = $('.side .banner');
  const $main = $('.main');
  const $side = $('.side');

  // Insert each banner after its matching image
  $images.each(function(index) {
    if ($banners[index]) {
      $(this).after($banners[index]);
    }
  });

  // Move remaining banners to the end of main
  $banners.slice($images.length).appendTo($main);

  // Empty the side container
  $side.empty();
});

How it works: #

1. We use jQuery selectors to target our elements, then wait for the DOM to load with $(document).ready().
2. The each() method loops through images, placing matching banners after each one with after().
3. The slice() method grabs all banners starting from the index of the last image, then appendTo() adds them to the main container.
4. $side.empty() clears the side container cleanly.

Full Working Example #

Here's a complete, runnable example with your original HTML/CSS plus the vanilla JS solution (jQuery version is commented out if you prefer that):

<!DOCTYPE html>
<html>
<head>
  <style>
    .content {display:flex; max-width:800px;min-width:300px;gap:20px;margin:auto;}
    .main { flex: 70%;}.main2 {max-width:400px;}
    .side { flex: 30%; padding:10px;}.img { background:blue;}.banner { background:red;}
    .img, .banner { width:100%; min-width:50px; height:50px;display:grid;place-items:center; color: #fff; margin:10px auto;}
  </style>
</head>
<body>
  <h2>Rearrange content - Place each div (banner) under each image </h2>
  <div class="content">
    <div class="main">
      <div class="img">Image 1</div>
      <div class="img">Image 2</div>
      <div class="img">Image 3</div>
      <div class="img">Image 4</div>
      <div class="img">Image 5</div>
      <div class="img">Image 6</div>
      <p> Multiple DIVs with images ... <br> ... </p>
    </div>
    <div class="side">
      <div class="banner">Banner1</div>
      <div class="banner">Banner2</div>
      <div class="banner">Banner3</div>
      <div class="banner">Banner4</div>
      <div class="banner">Banner5</div>
      <div class="banner">Banner6</div>
      <div class="banner">Banner7</div>
      <div class="banner">Banner8</div>
      <div class="banner">Banner9</div>
      <div class="banner">Banner10</div>
    </div>
  </div>
  <hr>
  <h2> This is how it should look </h2>
  <div class="main2">
    <div class="img">Image 1</div>
    <div class="banner">Banner1</div>
    <div class="img">Image 2</div>
    <div class="banner">Banner2</div>
    <div class="img">Image 3</div>
    <div class="banner">Banner3</div>
    <div class="img">Image 4</div>
    <div class="banner">Banner4</div>
    <div class="img">Image 5</div>
    <div class="banner">Banner5</div>
    <div class="img">Image 6</div>
    <div class="banner">Banner6</div>
    <div class="banner">Banner7</div>
    <div class="banner">Banner8</div>
    <div class="banner">Banner9</div>
    <div class="banner">Banner10</div>
  </div>

  <script>
    // Vanilla JavaScript solution (active)
    const mainContainer = document.querySelector('.main');
    const sideContainer = document.querySelector('.side');
    const images = document.querySelectorAll('.main .img');
    const banners = document.querySelectorAll('.side .banner');

    images.forEach((img, index) => {
      if (banners[index]) {
        img.after(banners[index]);
      }
    });

    for (let i = images.length; i < banners.length; i++) {
      mainContainer.appendChild(banners[i]);
    }

    sideContainer.innerHTML = '';
  </script>

  <!-- Uncomment below to use jQuery instead -->
  <!--
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $(document).ready(function() {
      const $images = $('.main .img');
      const $banners = $('.side .banner');
      const $main = $('.main');
      const $side = $('.side');

      $images.each(function(index) {
        if ($banners[index]) {
          $(this).after($banners[index]);
        }
      });

      $banners.slice($images.length).appendTo($main);
      $side.empty();
    });
  </script>
  -->
</body>
</html>

内容的提问来源于stack exchange，提问作者Adrian C