前言：在前面四篇文章中，我介紹了九宮格的原理及一個應用案例，本來已經告一段落了，但是那個佈局還是有一定的局限性的。其最大的限制是不能應用四角圓角外面是透明的圖片，而作為一個界面佈局方式，如果不能應用透明的外圓角，那麼這種佈局的可擴展性就會大受影響，不能最大化限度地得以推廣。本文就是要從根本解決這個問題。
我知道這個問題的根源在於：中間的左右邊框列垂直同高產生的，因為它們的父級容器是box這個總容器，而不是一個獨立的容器，而底部的左右兩個角容器是向上負偏移到它們的上面的，遮擋住了背景色。所以當圓角容器中的圖片採用半透明或透明的圖片時，其透明部分就會顯示出左右兩側邊框的圖片背景出來。
在製作前面的《牢不可破的九宮格版面》的模型時，我就已經發現了這個問題，當時製作圓角圖片也是採用的透明的圓角圖片，可是後來發現這個問題後，為了減少麻煩，我又將透明的圓角片的透明部分加上一個和總容器相同的背景色，來避免了這個問題。但這個方法最終不是解決的終極辦法，在我們的日常工作中，採用半透明的圓角來定制界面是很有必要的，因此在那篇文章中僅僅只是逃避了問題，而沒有從根本上解決問題。在文章發布之後，終於有細心的朋友在試用之後，提出這個問題，哈哈，看看終於是無法偷懶來迴避這個問題了。
知道了問題的根源後，要解決它也是一件簡單的事。
因為我這篇文章是建立在《牢不可破的九宮格版面》這篇文章的基礎上的，如果還沒看過那篇文章的朋友，不妨先看了它後再來看這篇文章。這將有助於你的消化！
看來，要解決這個問題，我需要將中間部分做一些結構上的修改。因為我希望它的左右邊框容器是和內容區是垂直同高的，也就是當內容區的文字內容的高度發生變化時，其左右邊框的高度跟著同步調整其高度。這就是一個典型的三列同高佈局。但與平常看到的三列佈局有點不同的是，我希望中間的內容區的寬度填滿整個中間的寬度，但它不是100%的寬度，而是100%減去左右兩列邊框的寬度，而這個寬度並不是一個百分比，它們都是有固定的像素值。這需要運用到我在上一篇文章中提到的方法來進行的解決。
為此我需要改變原來的結構：
【結構層】
我為中間的左中右三個容器增加一個父級容器，並給它定義一個類別名稱middle，那麼，現在的中間區域的結構應該是這樣的：
內容區< p>