CSS Code
复制内容到剪贴板
XML/HTML Code
复制内容到剪贴板
CSS Code
复制内容到剪贴板
DIV 布局之道⼀：DIV 块的⽔平并排、垂直并排
DIV 布局⽹页元素的⽅式主要有三种：平铺（并排）、嵌套、覆盖（遮挡）。本⽂先讲解平铺（并排）⽅式。
1、垂直平铺（垂直排列）
请看如下代码
CSS 部分：
.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 部分：
<div  class ="lay1"></div >
<div  class ="lay2"></div >
css实现三列布局
<div  class ="lay3"></div >  我们看到这⾥有三个DIV 块，三个DIV 块呈上下并列分布，这种⽅式就是常见的DIV “ 垂直平铺⽅式”
，也是最为常见的布局⽹页的⽅式，预览效果：我们可以看到⽹页中有三个“⽅块”呈上下排列。
2、⽔平平铺（⽔平排列）：
我们要让上例中的三个DIV 块呈⽔平排列该如何改写代码呢？其实只要我们相应的样式中加⼀个float:left 即可：
CSS 部分：
.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
块⽔平平铺了。不难吧？