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块水平平铺了。不难吧？