WEB教程基地:www.91ctc.com为你搭建学习WEB技术的优秀平台
网站地图 加入收藏 设为首页
您的位置:本站首页>>DIV CSS HTML>>DIV布局之道一:DIV块的水平并排、垂直并排

DIV布局之道一:DIV块的水平并排、垂直并排

[ 录入者:91ctc | 时间:2011-12-13 14:32:24 | 作者: 91ctc| 来源:本站原创 | 浏览: 次 ]

DIV布局网页元素的方式主要有三种:平铺(并排)、嵌套、覆盖(遮挡)。本文先讲解平铺(并排)方式。

1、垂直平铺(垂直排列)

请看如下代码

CSS部分:

CSS Code复制内容到剪贴板
  1. .lay1{ width:200pxheight:20pxborder:1px solid #FF6699;}   
  2. .lay2{ width:200pxheight:20pxborder:1px solid #FF6699;}   
  3. .lay3{ width:200pxheight:20pxborder:1px solid #FF6699;}  

HTML部分:

XML/HTML Code复制内容到剪贴板
  1. <div class="lay1"></div>  
  2. <div class="lay2"></div>  
  3. <div class="lay3"></div>  

我们看到这里有三个DIV块,三个DIV块呈上下并列分布,这种方式就是常见的DIV “ 垂直平铺方式”,也是最为常见的布局网页的方式,预览效果:

DIV垂直排列

我们可以看到网页中有三个“方块”呈上下排列。

2、水平平铺(水平排列):

我们要让上例中的三个DIV块呈水平排列该如何改写代码呢?其实只要我们相应的样式中加一个float:left 即可:

CSS部分:

CSS Code复制内容到剪贴板
  1. .lay1{ width:100pxheight:20pxborder:1px solid #FF6699float:left}   
  2. .lay2{ width:100pxheight:20pxborder:1px solid #FF6699float:left}   
  3. .lay3{ width:100pxheight:20pxborder:1px solid #FF6699float:left}  

HTML部分无需任何修改,预览效果:

DIV水平排列

这个时候,就把三个DIV块水平平铺了。不难吧?呲牙表情

本讲到此结束,敬请浏览本站后续技术文章。如有疑问请在本站留言

PS:如果您对本文有纠错、质疑、转载、举报等问题时,请加入到网站Q&Q&群:86783981(验证信息:91ctc.com)提交您的问题,让大伙一块讨论。谢谢您的支持,计算机教程中心网将会一如既往的提供优秀资源助您一臂之力!
关闭】【返回顶部

您可能感兴趣的文章
91ctc.com 网络先锋,引领科技,本站原创作品[转载请注明出处]。网站Q&Q&群:86783981(验证信息:91ctc.com)
Copyright© 2010-2017 计算机教程中心网 . All rights reserved. 苏ICP备11081842号