DIV布局之道一:DIV块的水平并排、垂直并排
2015-07-14 16:21
211 查看
IV布局网页元素的方式主要有三种:平铺(并排)、嵌套、覆盖(遮挡)。本文先讲解平铺(并排)方式。
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块水平平铺了。不难吧?
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块水平平铺了。不难吧?
相关文章推荐
- 独立实验室的大型数据结构设想
- 解析Qt中QThread使用方法
- leetcode题目难度及面试频率
- 彻底解决Ubuntu 14.04 重启后DNS配置丢失的问题
- SpringMVC中的异步提交表单
- 快速排序(递归版)
- LintCode Merge Sorted ArrayII 合并排序数组 II
- Currency Exchange
- 多对多 hibernate映射
- CSS3学习(七)响应式布局基础
- Android 中的拿来主义(编译,反编译,AXMLPrinter2,smali,baksmali)!
- 制作U盘启动 CDLinux--破解路由器必备工具
- mysql常用汇总
- git tag查看、创建与删除
- material design——设计文档
- 有空学习的技术
- mysql 与 memcache 字段名后面有空格时会产生什么问题(转)
- ios UIView的clipsTobounds属性
- HTML_常见命令学习笔记
- 多对多 hibernate映射