Vorwort: In den vorherigen vier Artikeln habe ich das Prinzip von Jiugongge und einen Anwendungsfall vorgestellt. Es ist zu Ende, aber dieses Layout weist immer noch gewisse Einschränkungen auf. Die größte Einschränkung besteht darin, dass Bilder mit transparenten abgerundeten Ecken nicht verwendet werden können. Wenn transparente äußere abgerundete Ecken nicht verwendet werden können, wird die Skalierbarkeit dieses Layouts stark beeinträchtigt und das Layout kann nicht maximiert werden. Dieser Artikel soll dieses Problem grundlegend lösen.
Ich weiß, dass die Hauptursache für dieses Problem darin besteht, dass die linken und rechten Randspalten in der Mitte vertikal die gleiche Höhe haben, da ihr übergeordneter Container der Gesamtcontainer der Box und kein unabhängiger Container ist und die linken und rechten Eckcontainer an der Ecke sind Unten werden negativ nach oben verschoben. Was darüber verschoben wird, blockiert die Hintergrundfarbe. Wenn das Bild im abgerundeten Behälter durchscheinend oder transparent ist, zeigt der transparente Teil daher den Bildhintergrund des linken und rechten Rands.
Ich hatte dieses Problem bereits bei der Erstellung des Vorgängermodells „ Unbreakable Nine-Square Grid Layout “ entdeckt. Damals habe ich auch transparente Bilder mit abgerundeten Ecken verwendet, nachdem ich dieses Problem jedoch später entdeckt hatte Um den Ärger zu reduzieren, habe ich auch transparente Bilder mit abgerundeten Ecken verwendet, um dieses Problem zu vermeiden. Aber diese Methode ist letztendlich nicht die ultimative Lösung, da es notwendig ist, durchscheinende abgerundete Ecken zu verwenden, um die Benutzeroberfläche anzupassen. Daher wurde das Problem in diesem Artikel einfach umgangen, ohne es grundlegend zu lösen. Nachdem der Artikel veröffentlicht wurde, stellte ein aufmerksamer Freund diese Frage, nachdem er ihn ausprobiert hatte. Es scheint, dass ich dieses Problem nicht durch Faulheit vermeiden kann.
Sobald Sie die Ursache des Problems kennen, ist die Behebung ein Kinderspiel.
Da mein Artikel auf dem Artikel „ The Unbreakable Nine-Gong Grid Layout “ basiert, können Sie, wenn Sie diesen Artikel noch nicht gelesen haben, ihn genauso gut zuerst und dann diesen Artikel lesen. Das wird Ihrer Verdauung helfen!
Es scheint, dass ich zur Lösung dieses Problems einige strukturelle Änderungen am Mittelteil vornehmen muss. Da ich möchte, dass seine linken und rechten Randcontainer vertikal die gleiche Höhe wie der Inhaltsbereich haben, d. h. wenn sich die Höhe des Textinhalts im Inhaltsbereich ändert, wird die Höhe seines linken und rechten Rands synchron angepasst. Dies ist ein typisches dreispaltiges Layout mit gleicher Höhe. Was sich jedoch ein wenig von dem dreispaltigen Layout unterscheidet, das ich normalerweise sehe, ist, dass ich möchte, dass die Breite des mittleren Inhaltsbereichs die gesamte mittlere Breite ausfüllt, aber nicht 100 % der Breite, sondern 100 % minus der Breite von die linken und rechten Spaltenränder. Und diese Breite ist kein Prozentsatz, sie haben alle feste Pixelwerte. Dies muss mit der Methode gelöst werden, die ich in meinem vorherigen Artikel erwähnt habe.
Dazu muss ich die ursprüngliche Struktur ändern:
【Strukturschicht】
Ich füge zu den drei linken, mittleren und rechten Containern in der Mitte einen übergeordneten Container hinzu und definiere dafür einen Klassennamen middle. Dann sollte die Struktur des mittleren Bereichs nun so aussehen:
Inhaltsbereich< p>