使用Css + Div 來進行排版寫作：DIV堆積木法

DIV的堆積木寫作法

按我讓div展現相互堆疊的排版效果

一塊堆一塊
創造出空間性意義呈現

這是要移動的Div版面區塊。
透過Div的上下移動，可以形成不同Div的相互「拼貼」作用，這樣就可以形成某種形式的排版效果。例如此例是：左字右圖的版面呈現形式。

範例說明：
設置上、下兩個 DIV （綠色及紅色框區域）。上面DIV使內容物件靠右；下面DIV使內容靠左。
再利用 style="margin-top: -6em;" 的 CSS 語法，將下面的 Div 區塊向上移動 6em，這樣就可以重疊兩個 Div ，創造版面的變化。網站教學；參考資料；使用範例。

影音教學：

CSS 的盒子模式

margin: xxem 是指 Div （盒子）與外部的距離。正的數字是指「擴張」距離，負的數字是指「收縮」距離。例如 2em 是指二個div之間擴張 2 個中文字元的距離，而 -2em 是兩個div之間減少 2 個中文字元的距離。可以有三種寫法：

1. style="margin: 2em 3em 2em 3em;"，如果寫了 4 個數字，是指 div （依續）上、右、下、左，四邊的外部距離。
2. style="margin: 2em 3em;"，如果只寫 2 個數字，是指上、下 2em，左、右 3em。
3. 也可以單獨指定任何一邊的外部距離，分別為 style="margin-top: 2em;" 上邊、style="margin-bottom: 2em;" 下邊、style="margin-left: 2em;" 左邊、style="margin-right: 2em;" 右邊。
   

---

實用範例，請 按我！

雲的來去

向風一樣的自由，是雲。
讓自由的風得以形成的，是山的綠。
在木與木的堅持中，
雲才能像風一樣，讓自由成為一種理解。

寫作構思：

一、先設置一個圖像。
二，在圖像下面設置一個DIV，內有文字。
三、在DIV設置 margin-top: -10em; ，使得DIV上升，並壓住圖像，形成文壓圖。
四、在DIV內再寫入 padding-left: -10px; 形成文字向右拉出距離，再把文字變成白色， color: white;


注意事項：

一般而言，當文本媒材物件被「移動」後，在版面「後面」的媒材，會壓住版面前面的媒材物件。也就是「後壓前」。



更多參考版型範例（請點按圖片↓）：