Comment obtenir des images côte à côte en javascript

Dans la conception Web, les images doivent souvent être affichées côte à côte, comme dans les présentations de produits ou dans les reportages. Comment réaliser des images côte à côte ? Ce qui suit explique comment utiliser JavaScript pour obtenir des images côte à côte.

1. Utiliser la mise en page Flexbox

Flexbox est un nouveau mode de mise en page en CSS3 qui peut facilement aligner et organiser les éléments. Grâce à la disposition Flexbox, nous pouvons facilement afficher les images côte à côte.

Tout d'abord, vous devez configurer un conteneur en CSS, définir la propriété d'affichage du conteneur sur flex, puis envelopper les images qui doivent être affichées côte à côte dans le conteneur. Ensuite, vous pouvez ajuster la taille et la position de l'image en définissant la propriété flex de l'élément dans le conteneur.

Ressemble à ceci :

Code HTML:

<div class="container">
  <img src="image1.jpg" alt="image1">
  <img src="image2.jpg" alt="image2">
  <img src="image3.jpg" alt="image3">
</div>

Code CSS:

.container {
  display: flex;
  justify-content: space-between;
}

2. Utilisation de la propriété CSS Float

La propriété CSS Float vous permet de faire flotter un élément le long du côté gauche ou droit de son conteneur, tout en d'autres éléments l'entoureront. Utilisez cet attribut pour afficher les images côte à côte.

Tout d'abord, vous devez définir l'attribut float des images qui doivent être affichées côte à côte en CSS, et le définir à gauche ou à droite. Ensuite, vous pouvez utiliser la propriété margin pour ajuster l'espacement des images.

Comme indiqué ci-dessous :

Code HTML :

<div class="container">
  <img src="image1.jpg" alt="image1" style="float: left;">
  <img src="image2.jpg" alt="image2" style="float: right;">
  <img src="image3.jpg" alt="image3" style="float: left;">
</div>

Code CSS :

.container img {
  margin: 10px;
}

3. Utilisation de la disposition en grille CSS

La disposition en grille CSS est une méthode de mise en page de type tableau qui peut diviser la page en lignes et en colonnes. est plus souple. Grâce à la disposition CSS Grid, vous pouvez facilement afficher les images côte à côte.

Tout d'abord, vous devez configurer un conteneur en CSS, définir la propriété d'affichage du conteneur sur grille, puis définir la largeur de colonne de l'image via la propriété grid-template-columns. Ensuite, vous pouvez placer les images qui doivent être affichées côte à côte dans la grille et ajuster la position et la taille des images.

Ressemble à ceci :

Code HTML :

<div class="container">
  <img src="image1.jpg" alt="image1">
  <img src="image2.jpg" alt="image2">
  <img src="image3.jpg" alt="image3">
</div>

Code CSS :

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.container img {
  width: 100%;
  height: auto;
}

Le code ci-dessus divise le conteneur en trois colonnes, chaque colonne est de même largeur et a un espacement de 10 px. La largeur de l'image est définie sur 100 % et la hauteur est adaptative.

Résumé

Ce qui précède présente trois façons d'utiliser JavaScript pour obtenir des images côte à côte : en utilisant la disposition Flexbox, la propriété CSS Float et la disposition CSS Grid. Chacune de ces méthodes présente ses propres avantages et inconvénients et peut être sélectionnée et utilisée en fonction de besoins spécifiques. Dans tous les cas, vous pouvez facilement afficher des images côte à côte pour rendre votre page Web plus belle et plus attrayante.

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!