La compatibilité du navigateur a toujours été un problème courant dans la disposition du CSS, et les débutants ont également atteint de nombreux malentendus.
Ces deux méthodes présentent les avantages suivants:
1. Pas besoin d'utiliser le piratage
2. Simple et efficace, vous pouvez le faire en un coup d'œil
3. Disposition hiérarchique et modulaire
4. Le code est plus raisonnable et plus facile à identifier
Méthode 1: Résoudre un désalignement flottant causé par l'ajout d'espacement interne et externe
Nous devons généralement utiliser Float pour flotter lors de la mise en page multi-colonnes.
Afin d'atteindre cet effet, nous ajouterons la marge pour fabriquer la colonne directement à partir de la distance et ajouter la bordure, plus le rembourrage afin que le texte à l'intérieur ne soit pas proche du cadre. Mais une situation inattendue s'est produite après la rédaction du code, la situation suivante s'est réellement produite:
Dans la troisième colonne, exécutez en bas. Ce n'est pas l'effet que vous voulez. Ensuite, analysons-le. Suivez l'idée générale. La largeur globale est de 800px, la colonne de gauche est de 200, le milieu 400, et la colonne de droite est de 200, ce qui semble bon, mais il doit y avoir un espacement entre ces colonnes, vous devez donc le changer: la colonne de gauche 190, le milieu 400, et la colonne de droite 190. Est-ce que ça va?
Mais pour la beauté, vous avez ajouté des frontières. Cependant, le cadre augmentera la largeur après avoir oublié la bordure. 168, afin de ne pas désaligner. Mais ne trouvez pas cela un peu compliqué? Il y aura une différence dans l'affichage de certains navigateurs pour cette disposition.
Ok, alors laissez-moi vous dire ma méthode. Selon la hiérarchie, je sépare la mise en page et l'écran. La disposition signifie ajouter au plus un espacement extérieur en plus de la largeur et du flottement, il me sera donc plus facile de calculer. Ensuite, nous ajoutons une div dans la colonne de la disposition pour afficher la bordure, l'espacement interne et externe, etc. Vous ne pouvez pas avoir besoin de définir la largeur, vous pouvez adapter. Pour faciliter votre mémoire, j'ai improvisé un poème: la largeur fixe doit être flottante, sans bordures ni patchs, mettre une div à l'intérieur et définir le style pour fonctionner!
Méthode 2: Résolvez les éléments flottants internes de la couche externe
Afin de créer un catalogue de produits ou un album d'image, nous avons utilisé UL ou N Divs pour flotter.
Mais les choses sont allées à l'encontre de mes attentes.
La solution à cela est en fait très simple.
1. Vous pouvez ajouter un flotteur: à gauche;
2. Une autre méthode consiste à placer un div pour effacer les flottants à la fin après la fin du flotteur.
3. Ajouter la hauteur ou la largeur à la couche externe.