css - Comment résoudre le problème de la chute des éléments flottants

Question

Vous voulez obtenir cet effet

Mais le code actuel s'écrit ainsi

    <p class="main">
     <p class="left"></p>
     <p class="center"></p>
     <p class="right"></p>
    </p>

.main{

    margin: 0 auto;
width: 100%;
height: 100%;
overflow: hidden;

}

.left{
    width: 5rem;
    height: 3rem;
    float: left;
    margin: 2rem;
    background-image: url("/templates/CeHua/images/new01.jpg");

}
.center{
    width: 5rem;
    height: 3rem;
    float: left;
    margin: 2rem;
    background-image: url("/templates/CeHua/images/new02.jpg");
}
.right{
    width: 5rem;
    height: 3rem;
    float: left;
    margin: 2rem;
    background-image: url("/templates/CeHua/images/new03.jpg");
    
}

S'il vous plaît, dites-moi comment le résoudre

J'ai lu beaucoup de réponses sur le problème de largeur. Après avoir modifié la largeur, l'image d'arrière-plan de p ne s'affiche pas entièrement. Existe-t-il un moyen de redimensionner la photo pour réduire la largeur ?

Answer 1

Réduire la largeur des deux premiers, probablement parce que la largeur dépasse la largeur maximale de l'élément parent, provoquant l'apparition de sauts de ligne

Answer 2

Largeur des trois sous-éléments : 33,333 %. Essayez de changer leur marge en remplissage et utilisez le pourcentage.

Answer 3

Raison 1 : La largeur du contenu + marge dépasse la largeur de l'élément parent.
Raison 2 : Tout flotteur : à gauche, ce problème est susceptible de se produire, généralement les deux laissés sur le. à gauche et à droite à droite
J'espère que cela pourra vous être utile

Answer 4

Dans les calculs CSS, il s'agit souvent de 1+1>2. Il existe de nombreuses raisons possibles (telles que les bordures, les espaces de nouvelle ligne, etc.). Une meilleure façon de gérer ce problème est de réduire de manière appropriée la largeur des nœuds enfants.

Le problème du blocage de l'image de fond. Après avoir modifié la largeur p, la taille de l'image de fond doit également être réglée simultanément (100%), sinon elle sera affichée en fonction de la taille réelle de l'image.

Answer 5

Cet attribut taille d'arrière-plan : 100 % 100 % ;

Answer 6

La largeur définie est supérieure à 100 %, ce qui la fait déborder sur la ligne suivante

Answer 7

Contrôle p width, background-size:contain, résolu. Si le rapport hauteur/largeur de l'image est le même que votre p, l'image ne doit pas être déformée.