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

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

请看如下代码

CSS部分:

CSS Code复制内容到剪贴板
  1. .lay1{ width:200px; height:20px; border:1px solid #FF6699;}
  2. .lay2{ width:200px; height:20px; border:1px solid #FF6699;}
  3. .lay3{ width:200px; height:20px; border: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 “ 垂直平铺方式”,也是最为常见的布局网页的方式,预览效果:

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

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

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

CSS部分:

CSS Code复制内容到剪贴板
  1. .lay1{ width:100px; height:20px; border:1px solid #FF6699; float:left}
  2. .lay2{ width:100px; height:20px; border:1px solid #FF6699; float:left}
  3. .lay3{ width:100px; height:20px; border:1px solid #FF6699; float:left}

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

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

DIV布局之道一:DIV块的水平并排、垂直并排的更多相关文章

  1. DIV布局-高度不同DIV,自动换行并对齐

    最近弄了一个动态添加div框,每个div框内容有多有少,要支持div高度自适应,还要添加的div自动追加,并且换行还要保持每行对齐. 刚开始的效果: 要改啊,搞不定,问了UI高手,终于给出了完美解决方 ...

  2. CSS+DIV布局初练—DIV元素必须成对出现?

    一直做C/S开发的工作,但是很少做和布局相关的工作,往往都是同事将界面设计好,自己填写代码而已,对于B/S的工作,做过,但是很少没有像C/S这么多,界面布局的话,更无从谈起. 日子就这么过,一天一个样 ...

  3. 四、PyQt5布局管理(绝对&相对、水平、垂直、格栅、表单)

    目录 一.绝对布局 二.盒布局 三.格栅布局 四.格栅布局跨行跨列显示 布局管理即设置窗体上各个控件的位置,对于新手来说,这是学习的难点. 布局管理根据绝对坐标是否变动分为绝对布局和相对布局两大类.采 ...

  4. 关于css+div布局的疑问 2017-03-19

    第一次布局一个静态网页,发现许多细节都需要自己探索,出现诸如以下问题: 1.布局问题:经常出现一个div被挤出来?做到一半少一个div布局? 布局之前,要点打好框架,明确每个地方的高宽是多少,争取精确 ...

  5. 回答: 2017-03-19的关于css+div布局的疑问 2017-04-05

    原问题为红色,回答为黑色 第一次布局一个静态网页,发现许多细节都需要自己探索,出现诸如以下问题: 1.布局问题:经常出现一个div被挤出来?做到一半少一个div布局? 布局之前,要点打好框架,明确每个 ...

  6. DIV布局之道三:DIV块的覆盖,DIV层遮盖其他DIV

    DIV布局网页的第三种方式:覆盖.DIV覆盖方式经常应用于网页弹出框的制作,例如在网店系统中,当用户没有登录时,点击购买,系统弹出一个登陆框. 请看代码: HTML部分: XML/HTML Code复 ...

  7. DIV布局之道二:DIV块的嵌套,DIV盒子模型

    本文讲解DIV块布局的第二种使用方式:嵌套.“DIV嵌套”在有些文献中也被称为“盒子模型”,说的通俗一点就是嵌套(一个大的DIV块内部又包含一个或多个DIV块). 请看如下代码: CSS部分: CSS ...

  8. 【html】【10】div布局[div水平垂直居中]

    必看参考: http://www.jb51.net/css/28259.html 让div居中对齐缩写形式为: .style{margin:0 auto;} 数字0 表示上下边距是0.可以按照需要设置 ...

  9. div 布局

    转:http://blog.csdn.net/mercop/article/details/7882000 HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理 ...

随机推荐

  1. canvas新属性

    lineCap默认值是butt,还有aquare,round 使用:context.lineCap="butt" lineJoin miter是默认 还可以是round,bevel ...

  2. a便签 rel属性改变链接打开页面的方式

    <body> XHTML: <a href="http://www.baidu.com" rel="external">Baidu &l ...

  3. PHP mysql 删除表中所有数据只保留一条

    DELETE FROM `logs` WHERE wangzhi='www.juhutang.com' and id<>101072; 上面这段代码的意思为 删除表logs中 所有字段wa ...

  4. Python学习笔记:02数据类型

    Python 数据类型 python中标准的数据类型有 基础类型 整型(长整型) 浮点型 复数型 布尔型 序列类型 字符串 列表 元组 字典 整型 整型和长整型并不严格区分,整型int的表达范围和计算 ...

  5. JS 操作Dom节点之样式

    为了提高用户体验,我们经常会动态修改Dom节点的样式,各种浏览器差异比较大,我们如何应对?不断尝试,不断总结~! 1. style.getComputedStyle.currentStyle 内嵌样式 ...

  6. [转载]在 Windows 10 中, 如何卸载和重新安装 OneNote App

    在 Windows 10 中, 如何卸载和重新安装 OneNote App 15/8/2015 使用 PowerShell 命令卸载 OneNote App 开始菜单 -> 输入 "P ...

  7. bzoj4171 or 省队集训day3 chess: Rhl的游戏

    [题目描述] RHL最近迷上一个小游戏:Flip it.游戏的规则很简单,在一个N*M的格子上,有一些格子是黑色,有一些是白色.每选择一个格子按一次,格子以及周围边相邻的格子都会翻转颜色(边相邻指至少 ...

  8. C#编写的序列化通用类代码

    using System; using System.IO; using System.IO.Compression; using System.Runtime.Serialization.Forma ...

  9. IOS--UIDatePicker 时间选择器 的使用方法详细

    IOS--UIDatePicker 时间选择器 的使用方法详细 // 主要有下面四种类型:   // 日期显示. // 日期和时间显示. // 时间显示. // 倒计时选择       // UIDa ...

  10. 疯狂java实战演义 弹球游戏代码

    package org.crazyit.ball; import java.awt.Image; import java.io.File; import javax.imageio.ImageIO; ...