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

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塊水平平鋪了。不難吧？