Comment positionner deux divisions côte à côte à l'aide de flotteurs CSS ?

Comment positionner deux div côte à côte

Pour placer deux éléments div côte à côte, vous pouvez utiliser le flotteur propriété en CSS.

Dans le div parent (#wrapper), définissez sa largeur et ajoutez une bordure pour le visuel clarté.

#wrapper {
  width: 500px;
  border: 1px solid black;
}

Pour le premier div (#first), donnez-lui une largeur fixe et appliquez une bordure :

#first {
  width: 300px;
  border: 1px solid red;
}

Pour faire flotter le premier div à gauche, ajoutez ce qui suit :

#first {
  ...
  float: left;
}

Laissez le deuxième div (#second) sans spécifier de largeur, mais donnez-lui un border:

#second {
  border: 1px solid green;
}

Pour vous assurer que le deuxième div respecte la hauteur du premier div, ajoutez une propriété de débordement au div wrapper :

#wrapper {
  ...
  overflow: hidden;
}

Alternativement, vous pouvez faire flotter à la fois le premier et deuxième divs, mais n'oubliez pas de définir la propriété overflow sur le div wrapper pour contenir les enfants flottants :

#wrapper {
  ...
  overflow: hidden;
}

#first {
  ...
  float: left;
}

#second {
  ...
  float: left;
}

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!