如何编写双列文本区JS代码及实现加密货币Widget双列布局？

Hey there! Let's break down how to get those four CoinMarketCap widgets into a clean two-column layout, and also cover how to set up a two-column text area in case that's still part of your needs.

First: Fixing the Widget Layout (No Heavy JS Needed!) #

Layout tasks like this are best handled with CSS—no need for complex JavaScript unless you're dealing with dynamic, on-the-fly content. Here's the simplest approach:

Step 1: Wrap Your Widgets in a Container #

First, group all four of your widget divs inside a parent container. This gives us a single element to style for the two-column grid:

<!-- Add this container around all your widgets -->
<div class="widget-grid">
  <!-- Your existing Ripple widget -->
  <div class="coinmarketcap-currency-widget" data-currency="ripple" data-base="USD" data-secondary="" data-ticker="true" data-rank="true" data-marketcap="true" data-volume="true" data-stats="USD" data-statsticker="false"></div>
  
  <!-- Your other 3 widgets go here -->
  <div class="coinmarketcap-currency-widget" data-currency="bitcoin" data-base="USD" data-secondary="" data-ticker="true" data-rank="true" data-marketcap="true" data-volume="true" data-stats="USD" data-statsticker="false"></div>
  <div class="coinmarketcap-currency-widget" data-currency="ethereum" data-base="USD" data-secondary="" data-ticker="true" data-rank="true" data-marketcap="true" data-volume="true" data-stats="USD" data-statsticker="false"></div>
  <div class="coinmarketcap-currency-widget" data-currency="solana" data-base="USD" data-secondary="" data-ticker="true" data-rank="true" data-marketcap="true" data-volume="true" data-stats="USD" data-statsticker="false"></div>
</div>

Step 2: Add CSS for the Two-Column Grid #

Use CSS Grid (the most straightforward for column layouts) to split the container into two equal columns. Add this to your site's stylesheet or a <style> tag:

.widget-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Creates 2 equal-width columns */
  gap: 1.5rem; /* Adds space between widgets—adjust to your preference */
  padding: 1rem; /* Optional: Adds padding around the grid */
}

/* Make it responsive for mobile */
@media (max-width: 768px) {
  .widget-grid {
    grid-template-columns: 1fr; /* Switches to single column on small screens */
  }
}

If you prefer Flexbox instead, you can use this CSS instead:

.widget-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding: 1rem;
}

.widget-grid .coinmarketcap-currency-widget {
  flex: 1 1 calc(50% - 0.75rem); /* Each widget takes 50% width minus half the gap */
  min-width: 280px; /* Prevents widgets from getting too narrow on smaller screens */
}

@media (max-width: 768px) {
  .widget-grid .coinmarketcap-currency-widget {
    flex: 1 1 100%; /* Single column on mobile */
  }
}

For Dynamic Scenarios: Using JavaScript #

If your widgets are loaded dynamically (e.g., added to the page after it loads), you can use a bit of JS to wrap them in the container and apply styles automatically:

document.addEventListener('DOMContentLoaded', function() {
  // Create the grid container
  const gridContainer = document.createElement('div');
  gridContainer.classList.add('widget-grid');

  // Grab all existing CoinMarketCap widgets
  const widgets = document.querySelectorAll('.coinmarketcap-currency-widget');

  // Move widgets into the container
  widgets.forEach(widget => {
    gridContainer.appendChild(widget);
  });

  // Add the container to your page (adjust the parent element if needed)
  document.body.appendChild(gridContainer);

  // Inject the CSS styles dynamically
  const styleSheet = document.createElement('style');
  styleSheet.textContent = `
    .widget-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5rem;
      padding: 1rem;
    }
    @media (max-width: 768px) {
      .widget-grid {
        grid-template-columns: 1fr;
      }
    }
  `;
  document.head.appendChild(styleSheet);
});

General Two-Column Text Area #

If you also need a two-column text area (like a section with text split into two columns), you can use CSS column-count for simple text:

.two-column-text {
  column-count: 2;
  column-gap: 1.5rem;
  padding: 1rem;
}

/* Responsive adjustment */
@media (max-width: 768px) {
  .two-column-text {
    column-count: 1;
  }
}

Then apply it to a text container:

<div class="two-column-text">
  Your long-form text here... It will automatically split into two columns on larger screens.
</div>

That's it! This should give you a clean, responsive two-column layout for both your widgets and text areas.

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