Comment créer des colonnes de texte en CSS : CSS uniquement ou JavaScript ?

Création de colonnes de texte avec débordement CSS

Dans le développement Web, vous pouvez rencontrer une situation dans laquelle vous souhaitez créer des colonnes de texte, rappelant la mise en page trouvée dans les journaux. Pour obtenir cet effet sans utiliser de divs HTML supplémentaires, vous pouvez exploiter CSS et envisager d'incorporer également JavaScript.

Solution CSS uniquement

Heureusement, il existe une solution CSS uniquement solution qui peut transformer votre texte en colonnes soignées. En utilisant les règles CSS suivantes, vous pouvez spécifier le nombre de colonnes, l'espacement entre elles et définir les bordures :

div.multi {
  column-count: 3;
  column-gap: 10px;
  column-rule: 1px solid black;      
}

Solution JavaScript

Alternativement, vous pouvez utiliser JavaScript pour créer dynamiquement les colonnes. Voici une approche possible :

// Get the content div
const content = document.querySelector(".content");

// Count the number of paragraphs
const paragraphs = content.querySelectorAll("p");

// Split the paragraphs into two equal arrays
const firstHalf = paragraphs.slice(0, Math.floor(paragraphs.length / 2));
const secondHalf = paragraphs.slice(Math.floor(paragraphs.length / 2));

// Float the second half of the paragraphs right
secondHalf.forEach((paragraph) => {
  paragraph.style.float = "right";
});

Dans ce scénario, JavaScript compte les paragraphes dans la division de contenu, les divise en deux tableaux et fait flotter la seconde moitié des paragraphes pour créer la mise en page à deux colonnes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!