DIV布局之道一：DIV塊的水平並排、垂直並排

07-04

DIV布局網頁元素的方式主要有三種：平鋪（並排）、嵌套、覆蓋（遮擋）。本文先講解平鋪（並排）方式。1、垂直平鋪（垂直排列）請看如下代碼CSS部分：CSS Code複製內容到剪貼板 .lay1{ width:200px; height:20px; border:1px solid #FF6699;} .lay2{ width:200px; height:20px; border:1px solid #FF6699;} .lay3{ width:200px; height:20px; border:1px solid #FF6699;} HTML部分：XML/HTML Code複製內容到剪貼板 <div class="lay1"></div> <div class="lay2"></div> <div class="lay3"></div> 我們看到這裡有三個DIV塊，三個DIV塊呈上下並列分布，這種方式就是常見的DIV 「垂直平鋪方式」，也是最為常見的布局網頁的方式，預覽效果：

我們可以看到網頁中有三個「方塊」呈上下排列。2、水平平鋪（水平排列）：我們要讓上例中的三個DIV塊呈水平排列該如何改寫代碼呢？其實只要我們相應的樣式中加一個float:left 即可：CSS部分：CSS Code複製內容到剪貼板 .lay1{ width:100px; height:20px; border:1px solid #FF6699; float:left} .lay2{ width:100px; height:20px; border:1px solid #FF6699; float:left} .lay3{ width:100px; height:20px; border:1px solid #FF6699; float:left} HTML部分無需任何修改，預覽效果：

這個時候，就把三個DIV塊水平平鋪了。不難吧？