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

Comment positionner deux div côte à côte à l'aide de CSS

En CSS, il est possible d'obtenir l'alignement vertical et la proximité souhaités des éléments div à travers diverses techniques. Une approche efficace consiste à utiliser le flottement.

Utiliser Float

Flotter un ou les deux divs internes côte à côte leur permettra de s'aligner horizontalement sans affecter la disposition des divisions adjacentes. contenu.

Floating One Div

Ajout du flotteur : gauche ; La propriété #first dans le CSS ci-dessous la fera flotter vers la gauche, l'amenant à occuper le côté gauche du div #wrapper tandis que le #second div reste à droite.

#wrapper {
  width: 500px;
  border: 1px solid black;
  overflow: hidden;
}
#first {
  width: 300px;
  float: left;
  border: 1px solid red;
}
#second {
  border: 1px solid green;
  overflow: hidden;
}

Flottant Les deux divisions

Flotter à la fois #first et #second entraînera également un arrangement côte à côte. Cependant, il est essentiel d'empêcher la division #wrapper de se rétrécir autour de ses enfants flottants. Pour y parvenir, ajoutez overflow: Hidden; à #wrapper, en s'assurant qu'il contient les deux éléments flottants.

#wrapper {
  width: 500px;
  border: 1px solid black;
  overflow: hidden;
}
#first {
  width: 300px;
  float: left;
  border: 1px solid red;
}
#second {
  border: 1px solid green;
  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!