DIV CSS 佈局教程網

下面是各種分類的例子：

內容流(Content flow)

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

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

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

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

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

CSS

1
2
3
4
5
6
7

#source {
	flow: "main-thread";
}
.region {
	content: from(main-thread);
	background: #C5DFF0;
}

HTML

1
2
3
4
5
6
7

 <div id="source">
	<p>Lorem ipsum dolor [...]</p>
</div>
 
<div id="region1" class="region"></div>
<div id="region2" class="region"></div>
<div id="region3" class="region"></div>

你可以在一個頁面中聯合多個命名的flow。你也可以使用content-order屬性來控制文字流的順序。如果沒有指定，將會使用正常的文檔順序。

通過這個簡單的構件，你可以實現更復雜的布局，包括多列文本、不同寬高的列，以及跨越多個列的區域。(見圖2)

圖2. 文字穿越堆疊的區域和列

形狀環繞(Wrap shape)

使用形狀環繞，你可以控制文字經過區域的形狀(見圖3)。你也可以使用這個屬性搭配內容流或者單獨的創建更有趣的設計。

圖3.文字內容顯示在自定義形狀的內部

要使用這個特性，你需要使用wrap-shape屬性來定義形狀，並設定wrap-shape-mode屬性為需要的值。通過制定content的值，文字將顯示在形狀內部。

上面的現實心形的代碼如下：

CSS

1
2
3
4
5
6
7
8
9
10
11

.circle{
/* 定義元素形狀為一個圓*/
	wrap-shape: polygon(0px, 150px /* ...更多點*/);
	wrap-shape-mode: content;   
}
 
.heart{
	/* 定義元素形狀為心形*/
	wrap-shape: polygon(150px, 32px /* ...更多的點 */);  
	wrap-shape-mode: content;   
}

HTML

1
2

<div class="circle"></div>
<div class="heart"></div>

我們的基於WebKit原型支持使用一個簡單的多邊形指定一個形狀，但是你可以想象其它的集合體也可以被用於設定形狀，或者甚至使用一張圖片的alpha值。。。

環繞(Exclusions)

通過使用wrap-shap-mode屬性的其它值，你可以創建不同的效果，包括指定的wrap-shape 屬性可以理解為要完全避開的區域(看圖4)。

圖4. 文字環繞在自定義圖形周圍

CSS

1
2
3
4

.exclusion{
	/* 文字環繞整個元素 */
	wrap-shape-mode: around;
}

HTML

1
2
3

 <div class="exclusion circle">
	<p>Lorem ipsum dolor [...]</p>
</div>

區域樣式(Region Styling)

在雜志中，指定內容環繞設計中的一個特定的區域是很常見的。我們稱之為區域樣式。例子展示了文字環繞在第一個區塊(包括introduction標題的部分)被設定為深藍色，而余下的文字則為灰色(看圖 5)。

圖5.文字樣式依賴它流入的區域

CSS

1
2
3
4
5
6
7
8

p {
	color: gray:
}
@region-style #region_1 {
	p {
		color: #0C3D5F;
	}
}

HTML

1
2
3
4
5
6
7
8

<div id="article">
	<h1>Introduction</h1>
	<p>This is an example [...]</p>
</div>
<div id="region_1"></div>
<div id="region_2"></div>
<div id="region_3"></div>
<div id="region_4"></div>

區域樣式目前還沒有在Adobe Labs的這個webkit原型裡面實現。

CSS3 區域和媒體查詢

那些基本的構建塊可以組合起來創建更有趣更復雜的布局，類似你經常看到的印刷出版物。你也可以將它們配合其它web標准適用。比如，結合CSS媒體查詢，可以創建適應不同設備的方向(橫屏landscape、豎屏portrait等)的布局。

圖 6展示了使用wrap-shape屬性結合CSS3 媒體查詢來實現適應不同屏幕朝向的布局。

圖6. 使用屬性結合CSS3 媒體查詢來實現適應不同屏幕朝向的布局

圖7 展示如何讓同樣的內容適應不同的屏幕方向，以及變化的列數

圖7 內容適應不同的屏幕方向，同時改變的列數

CSS3 區域和JavaScript

你也可以將這些功能結合JavaScript以創建交互的內容。在下面的圖8中展示的，你可以滑動雙向的箭頭以移動圖片，這個時候，文字圍繞山體和汽車重新布局。

圖8. 滑動雙向的箭頭移動圖片，文字圍繞山體和汽車重新布局

這個例子包含在上面提到的WebKit原型中，你可以下載體驗下。

譯注：CSS3 region這個詞，著實不太好翻譯，暫時按照region的意思翻譯為區域，但是感覺很別扭。還有文中的一些詞組，如果你覺得有更好的中文說法，請賜教——神飛。