Préface : Dans les quatre articles précédents, j'ai présenté le principe de Jiugongge et un cas d'application. Il est terminé, mais cette disposition présente encore certaines limites. Sa plus grande limitation est qu'il ne peut pas utiliser d'images avec des coins arrondis transparents. En tant que méthode de mise en page d'interface, si les coins arrondis extérieurs transparents ne peuvent pas être utilisés, l'évolutivité de cette mise en page sera grandement affectée et la mise en page ne pourra pas être maximisée. Cet article vise à résoudre fondamentalement ce problème.
Je sais que la cause première de ce problème est que les colonnes de bordure gauche et droite au milieu ont verticalement la même hauteur, car leur conteneur parent est le conteneur total de la boîte, pas un conteneur indépendant, et les conteneurs de coin gauche et droit au niveau en bas sont décalés négativement vers le haut. Ce qui est déplacé au-dessus d'eux bloque la couleur d'arrière-plan. Par conséquent, lorsque l'image dans le conteneur arrondi est translucide ou transparente, la partie transparente affichera l'arrière-plan de l'image des bordures gauche et droite.
J'avais déjà découvert ce problème lors de la création du modèle précédent de " Disposition de grille incassable à neuf carrés ". À cette époque, j'avais également utilisé des images transparentes aux coins arrondis pour créer les images aux coins arrondis. Cependant, après avoir découvert ce problème plus tard, afin de. pour réduire les problèmes, j'ai également utilisé des images transparentes aux coins arrondis. La partie transparente de la pièce à coins arrondis transparente est ajoutée avec une couleur de fond qui est la même que celle du conteneur principal pour éviter ce problème. Mais cette méthode n’est finalement pas la solution ultime : dans notre travail quotidien, il est nécessaire d’utiliser des coins arrondis translucides pour personnaliser l’interface. Par conséquent, dans cet article, elle a simplement évité le problème sans le résoudre fondamentalement. Après la publication de l'article, un ami attentif a finalement soulevé cette question après l'avoir essayé Haha, il semble que je ne peux pas éviter ce problème en étant paresseux.
Une fois que vous connaissez la source du problème, le résoudre est simple.
Parce que mon article est basé sur l'article « La disposition incassable de la grille à neuf gongs », si vous n'avez pas encore lu cet article, autant le lire d'abord, puis lire cet article. Cela facilitera votre digestion !
Il semble que pour résoudre ce problème, je doive apporter quelques modifications structurelles à la partie centrale. Parce que je veux que ses conteneurs de bordure gauche et droite aient verticalement la même hauteur que la zone de contenu, c'est-à-dire que lorsque la hauteur du contenu du texte dans la zone de contenu change, la hauteur de ses bordures gauche et droite sera ajustée de manière synchrone. Il s’agit d’une disposition typique à trois colonnes de même hauteur. Mais ce qui est un peu différent de la disposition à trois colonnes que je vois habituellement, c'est que je veux que la largeur de la zone de contenu du milieu remplisse toute la largeur du milieu, mais ce n'est pas 100 % de la largeur, mais 100 % moins la largeur de les bordures des colonnes gauche et droite. Et cette largeur n'est pas un pourcentage, elles ont toutes des valeurs de pixels fixes. Cela doit être résolu en utilisant la méthode que j'ai mentionnée dans mon article précédent.
Pour ce faire, je dois modifier la structure d'origine :
【Couche structurelle】
J'ajoute un conteneur parent aux trois conteneurs gauche, milieu et droit au milieu et je définis un nom de classe middle pour celui-ci. Ensuite, la structure de la zone centrale devrait maintenant ressembler à ceci :
Zone de contenu< p>