這是一個adobe的提議：css Regions，提供在多個不同元素中排布內容的方法。首先需要為內容容器聲明一個flow屬性獨一無二的字符值，然后通過from（）函數和內容的屬性確定內容將會在哪些元素內排布：
1. .content { flow: foo; }
2. .target1, .target2 { content: from(foo); }
首先將內容容器中的內容放置到第一個元素target1中，如果有溢出，就將溢出的部分放在target2中顯示。說得更明白一點，她不是在另一個target中重復內容，而是繼續在第二個target中顯示1中沒有完全顯示的內容。請看下面的例子：

region布局效果
隨便說一下，兩個目標區域不需要在DOM或者布局中相鄰，如果需要的話，她們完全可以是同一個頁面的兩個毫不相干的人或者仇人（但是這樣的話會帶來可及性問題）。
Regions和Exclusions一樣還不被任何瀏覽器支持，但是你可以從adobe的實驗室中下載它，親自試一試。

現在，讓我們了解這個擴展吧，他們可以被分為4類:

    線性內容(Threading content): 從一個區域“流向”另一個區域的內容。
    任意形狀的容器(Arbitrarily shaped containers): 在非矩形區域內顯示文本。
    任意形狀環繞(Arbitrarily shaped exclusion): 文本環繞非矩形區域。
    區域樣式(Region styling):根據流向區域顯示內容。

下面是各種分類的例子：
內容流(Content flow)

在典型的HTML文檔中，文字可以在多個區域顯示，但是每個區域中的文字是不相關的(見圖1)。如果你想要跨多個列顯示文本，或者使用別的你需要的更復雜的區域來手動。在用戶放大文字或者用戶的字體比你設定的字體大時，這可能會無法亂掉。這個方法(css3 region)同樣是的擁有在縮放窗口是自適應的流體布局成為可能，或者，當顯示在平板上時，自適應豎屏(portrait)或者橫屏(landscape)顯示。

文字跨3個不同寬的列顯示

如果你想要單獨地指定一托內容(比如文字和圖片)，那些內容如何在一串區域內顯示(flow)呢？這正是內容流(content flow)要做的。

要使用它，通過flow屬性賦予內容的容器一個名字，這樣做會將內容從普通的CSS布局流中去掉，然后你可以插入這個線程到1個或多個其他區域——使用from()作為content屬性的值。

上面的三列布局的代碼如下：

CSS

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表