はじめに: 前回までの 4 回の記事で、九公歌の原理と応用事例を紹介しましたが、そのレイアウトにはまだいくつかの制限があります。最大の制限は、インターフェイスのレイアウト方法として、透明な角の丸い画像を使用できないことです。このレイアウトのスケーラビリティは大きく影響され、レイアウトを最大限に活用できません。この記事はこの問題を根本的に解決するものです。
この問題の根本原因は、中央の左右の境界列が垂直方向に同じ高さであることだとわかっています。これは、親コンテナーが独立したコンテナーではなくボックスの合計コンテナーであり、左隅と右隅のコンテナーが独立したコンテナーであるためです。下部は上に負のオフセットになります。その上に移動したものは背景色をブロックします。したがって、丸いコンテナ内の画像が半透明または透明である場合、透明な部分には左右の境界線の画像の背景が表示されます。
この問題は、以前のモデル「 Unbreakable Nine-square Grid Layout 」を作成したときにすでに発見していましたが、そのときも角丸画像を透明にして作成していましたが、後でこの問題を発見してから、この問題を避けるために、透明な角丸部分の透明な部分にメインのコンテナと同じ背景色を追加しました。しかし、この方法は最終的には、インターフェースをカスタマイズするために半透明の丸い角を使用する必要があるため、根本的な解決にはならず、問題を回避するだけでした。この記事が公開された後、親切な友人が実際に試してみて、ついにこの疑問を提起しました（笑）、どうやら怠け者ではこの問題を避けることはできないようです。
問題の原因がわかれば、それを修正するのは簡単です。
私の記事は「 The Unbreakable Nine-Gong Grid Layout 」という記事を元にしているので、まだその記事を読んでいない方は、先にそれを読んでからこの記事を読むと良いでしょう。これは消化を助けます！
この問題を解決するには、中間部分の構造をいくつか変更する必要があるようです。左側と右側の境界線コンテナーの垂直方向の高さをコンテンツ領域と同じにする必要があるため、つまり、コンテンツ領域内のテキスト コンテンツの高さが変更されると、その左側と右側の境界線の高さが同期して調整されます。これは、同じ高さの典型的な 3 列レイアウトです。しかし、私が通常見る 3 列レイアウトと少し異なるのは、中央のコンテンツ領域の幅が中央の幅全体を埋めるようにしたいということですが、これは幅の 100% ではなく、100% から幅を引いたものになります。左右の列の境界線はパーセンテージではなく、すべて固定のピクセル値を持っています。これは、前の記事で説明した方法を使用して解決する必要があります。
これを行うには、元の構造を変更する必要があります。
【構造層】
中央の左、中、右の 3 つのコンテナに親コンテナを追加し、それにクラス名 middle を定義すると、中央の領域の構造は次のようになります。
コンテンツエリア< p>