经典布局案例（三）：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>CSS布局</title>

</head>

<body>

<div style="height: 400px;width: 200px;float: left"></div>

<div style="height: 400px;width: 200px;float: left;clear: both"></div>

<div style="height: 800px;overflow: hidden"></div>

</body>

</html>

上述代码定义了三个div块，用到了float浮动属性、overflow属性和clear属性。

页面效果如下：

其中红色和蓝色div块为定宽绿色不定宽。

转载自本人ITeye链接：http://xiaozhuang0706.iteye.com/blog/2263015

Html 经典布局（三）的更多相关文章

  1. ccs之经典布局（二）（两栏，三栏布局）

    接上篇ccs之经典布局(一)(水平垂直居中) 四.两列布局 单列宽度固定,另一列宽度是自适应. 1.float+overflow:auto; 固定端用float进行浮动,自适应的用overflow:a ...

  2. ccs之经典布局（三）（等分，等高布局）

    接上篇ccs之经典布局(二)(两栏,三栏布局) 七.等分布局 等分布局是指一行被分为若干列,每一列的宽度是相同的值.两列之间有若干的距离. 1.float+padding+background-cli ...

  3. css经典布局——头尾固定高度中间高度自适应布局

    转载:穆乙 http://www.cnblogs.com/pigtail/ 相信做过后台管理界面的同学,都非常清楚这个布局.最直观的方式是框架这个我不想多写费话,因为我们的重心不在这里.如果有不了解的 ...

  4. Html 经典布局（一）

    经典布局案例(一): <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  5. div+css实现几种经典布局的详解

    一.左右两侧,左侧固定宽度200px,右侧自适应占满 <div class="divBox"> <div class="left">&l ...

  6. CSS布局——三栏布局

    说到三栏布局,很多都会提到圣杯布局和双飞翼布局这两个经典的三栏布局方式.于是,我在网上搜了一些相关资料,阅读并跟着代码敲了一遍,发现在处理三栏布局上,他们采用的都是两边栏固定,中间栏自适应的策略.在处 ...

  7. 只要一行代码，实现五种 CSS 经典布局

    常用的页面布局,其实就那么几个.下面我会介绍5个经典布局,只要掌握了它们,就能应对绝大多数常规页面. 这几个布局都是自适应的,自动适配桌面设备和移动设备.代码实现很简单,核心代码只有一行,有很大的学习 ...

  8. css经典布局之左侧固定大小右侧自动适应

    最近学习了一种经典布局,固定左侧或右侧的宽度,另一侧自适应宽度,此种布局挺常用,尤其是像后台,大部分都是采用这种结构,还比如像订餐类的APP,进入商家的时候,会出现一堆饭的列表,左侧是饭的分类,右侧是 ...

  9. Html 经典布局（二）

    经典布局案例(二): <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

随机推荐

  1. HTML文档中使用JavaScript和css

    HTML文档中使用JavaScript和css 引入css 内嵌式引入:将css代码写在HTML中的style标签里面 <!DOCTYPE html> <html> <h ...

  2. express 4

    http://www.expressjs.com.cn/4x/api.html#app中间件 路由 模板 跨域 json cookie session

  3. Selenium2 WebDriver环境搭建

    1.下载Selenium Client Servers包 在Selenium官网上可以下载到最新的开源的包http://seleniumhq.org/download/,根据编写测试脚本所使用的语言下 ...

  4. 文件IO理解

    一次读取写入单个字节 public class CopyFileDemo { public static void main(String[] args) throws IOException { F ...

  5. VC++中解决“在查找预编译头使用时跳过”的方法

    Visual C++ Concepts: Building a C/C++ ProgramCompiler Warning (level 1) C4627Error Message": sk ...

  6. 使用shape来定义控件的一些显示属性

    Android中常常使用shape来定义控件的一些显示属性,今天看了一些shape的使用,对shape有了大体的了解,稍作总结 先看下面的代码: <shape> <!-- 实心 -- ...

  7. 防火墙之netfailt、iptables详解

    [TOC] Iptables入门 # 1.iptables介绍 linux的包过滤功能,即linux防火墙,它由netfilter 和 iptables 两个组件组成. netfilter 组件也称为 ...

  8. SQL动态语句 拼接SQL 并输入输出值

    --动态语句语法 /****************************************************************************************** ...

  9. iOS开发之单例模式

    1.概述 单例模式是一种常用的软件设计模式,通过单例模式可以保证系统中一个类只有一个实例而且该实例易于外界访问,从而方便对实例个数的控制并节约系统资源. 如果希望系统中某个类的对象只能存在一个,单例模 ...

  10. iOS开发之判断系统版本

    if([[UIDevice currentDevice].systemVersion doubleValue]>=7.0) { //是IOS7至以上版本 }else{ //IOS7以下版本 }