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

Comment positionner deux divs côte à côte en CSS

En CSS, vous pouvez placer deux divs l'un à côté de l'autre à l'aide des propriétés float.

Flotter une division

Pour faire flotter une div à côté du autre, ajoutez le float: left; propriété à la div souhaitée. Cela fera déplacer le div vers le côté gauche du wrapper.

#wrapper {
    width: 500px;
    border: 1px solid black;
}
#first {
    width: 300px;
    float: left; /* Float div to the left */
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    overflow: hidden; /* Prevent text wrapping below #first */
}

Flotter les deux divs

Pour faire flotter les deux divs l'un à côté de l'autre, ajoutez le flotteur : gauche; propriété aux deux divs. Cependant, vous devrez peut-être ajouter overflow: Hidden; au div wrapper pour empêcher les divs de s'étendre au-delà de la largeur du wrapper.

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: hidden; /* Prevent floated divs from extending beyond wrapper */
}
#first {
    width: 300px;
    float: left; /* Float div 1 to the left */
    border: 1px solid red;
}
#second {
    float: left; /* Float div 2 to the left */
    border: 1px solid green;
}

En utilisant ces propriétés float, vous pouvez positionner deux divs côte à côte dans un div wrapper. La hauteur du div vert déterminera la hauteur totale de l'emballage.

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!