Comment puis-je organiser les éléments côte à côte en HTML et CSS ?

HTML :

<div class="parent">
  <div class="child-left">A</div>
  <div class="child-right">B</div>
</div>

CSS :

.child-left {
  float: left;
}

.child-right {
  float: right;
}

Affichage des blocs en ligne

Une autre façon aligner les éléments côte à côte consiste à définir leur propriété d'affichage sur inline-block. Cela leur permettra de s'articuler les uns à côté des autres, un peu comme des éléments en ligne (par exemple, du texte ou des images).

HTML :

<div class="parent">
  <div class="child-left">A</div>
  <div class="child-right">B</div>
</div>

CSS :

.child-left {
  display: inline-block;
}

.child-right {
  display: inline-block;
}

Flexbox

Flexbox est un système de mise en page puissant qui fournit un moyen flexible et polyvalent d’aligner les éléments. Avec Flexbox, vous pouvez spécifier la façon dont les éléments sont disposés le long d'un axe principal (par exemple, horizontalement ou verticalement) et d'un axe transversal (par exemple, de gauche à droite ou de droite à gauche).

HTML:

<div class="parent">
  <div class="child-left">A</div>
  <div class="child-right">B</div>
</div>

CSS:

.parent {
  display: flex;
  flex-direction: row;
}

.child-left {
  flex-basis: auto;
}

.child-right {
  flex-basis: auto;
}

Grille

CSS Grid est un autre système de mise en page qui peut être utilisé pour aligner des éléments côte à côte. Grid fournit un système de mise en page en deux dimensions, vous permettant de positionner les éléments à la fois horizontalement et verticalement.

HTML :

<div class="parent">
  <div class="child-left">A</div>
  <div class="child-right">B</div>
</div>

CSS :

.parent {
  display: grid;
  grid-template-columns: repeat(2, auto);
}

.child-left {
  grid-column: 1 / 2;
}

.child-right {
  grid-column: 2 / 3;

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!