经典布局案例（三）：

<!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. （九）javaScript的基本使用

    <script type="text/javascript"> var userName; var userAge; function interInfo(){ use ...

  2. jsonpath读取json数据格式公用方法！！！

    import java.util.LinkedHashMap; import com.jayway.jsonpath.JsonPath; import com.jayway.jsonpath.Pred ...

  3. 【转】nginx配置：location配置方法及实例详解

    location匹配的是nginx的哪个变量? $request_uri location的匹配种类有哪些? 格式 location [ 空格 | = | ~ | ~* | !~ | !~* ] /u ...

  4. Thread.join()的使用

    代码清单: package com.baidu.nuomi.concurrent; import java.util.concurrent.TimeUnit; /** * Created by son ...

  5. mysql 索引篇

    一.索引优化   索引优化主要还是依赖explain命令,关于explain命令相信大家并不陌生,具体用法和字段含义可以参考官网explain-output,这里需要强调rows是核心指标,绝大部分r ...

  6. 读learning spark lighting chapter1~chapter2

    chapter 1 introduction to the analysis with spark the conponents of Sparks spark core(contains the b ...

  7. 让我的分页类获取sessionFactory

    我们知道在Hibernate里比较重要的sessionFactory,经过Spring的管理可以很好地为Spring里注入使用的bean服务(提供数据源的使用),但是,当我们所要使用的类不是像我们尝试 ...

  8. jQuery选择器对应的DOM API ——选择元素

    英文原文:http://blog.garstasio.com/you-dont-need-jquery/selectors/愚人码头注: 原作者的写这文章的意图是让我们抛弃jQuery,You Don ...

  9. 利用echo命令实现倒计时的功能

    echo -e:启用反斜线控制字符的转换        -E:关闭反斜线控制字符的转换(预设如此)        -n:取消行末之换行符号(与 -e 选项下的 \c 字符同意 -e参数下的控制参数 \ ...

  10. CrawlScript脚本语言实现网络爬虫

    前段时间我们学习了几种爬虫技术,我们来回顾一下,webCollector,htmlParser,Jsoup,各有优劣,但是如果能灵活运用,其实都是很不错的.那么,今天呢,我们来学习一种脚本语言,这是一 ...