经典布局案例（三）：

<!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. 完全理解Python迭代对象、迭代器、生成器

    在了解Python的数据结构时,容器(container).可迭代对象(iterable).迭代器(iterator).生成器(generator).列表/集合/字典推导式(list,set,dict ...

  2. Visual Studio 20周年软件趋势随想

    从2002年开始,.net让开发人员能快速构建和部署应用程序,便捷的开发windows和web服务器应用,同时著名的hacker Miguel de Icaza ,Miguel 为了GNOME项目启动 ...

  3. sonarqube代码检测

    1.安装java环境 略 2.下载sonarqube包 sonarqube与sonar-runner的下载地址:http://www.sonarqube.org/downloads/ 将下载好的软件包 ...

  4. 3399: [Usaco2009 Mar]Sand Castle城堡

    3399: [Usaco2009 Mar]Sand Castle城堡 Time Limit: 3 Sec  Memory Limit: 128 MBSubmit: 37  Solved: 32[Sub ...

  5. CoreGraphics--饼状图

    //传入数据,饼状图 pieChartView.dataArr = @[@20,@50,@80,@70,@40]; - (void)drawRect:(CGRect)rect { // Drawing ...

  6. java-信息安全（七）-基于非对称加密，对称加密等理解HTTPS

    概述 java-信息安全(一)-BASE64,MD5,SHA,HMAC java-信息安全(二)-对称加密算法DES,3DES,AES,Blowfish,RC2,RC4 java-信息安全(四)-数据 ...

  7. Visual Studio 2015/2017 与ASP.NET CORE 联合创建具有SPA模式的Angular2模板

    虽然注册博客园很久,但是一直没有什么可写的,真心感觉好尴尬了,这次终于找到了一点可以写,有点小兴奋和小害羞呢. 进入主题,前端SPA模式越来越受到欢迎,Core 也开始被很多企业提上日程,但是因为这个 ...

  8. Robot Framework 使用笔记

    条件表达式: Run Keyword If 表达式 执行动作   ... ELSE IF 表达式 执行动作 ... ELSE 执行动作   基础格式见上表,下面是我遇到的坑: 表达式:判断字符串变量是 ...

  9. zip error: Invalid command arguments

    在编译使用svn管理的android代码时,会出现如下错误: zip error: Invalid command arguments (cannot repeat names in zip file ...

  10. iOS多线程——GCD

    最近的项目遇到了很多多线程的问题,借此机会对GCD进行了一番学习并总结.首先说一下什么是GCD,GCD全称 Grand Central Dispatch,是异步执行任务的技术之一.开发者只需要定义想要 ...