<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<style type="text/css">

*{margin:0;padding:0;}

#wrap{width:960px;margin:0 auto;background:#00C;}

#header{background:#FF3300;width:100%;}

#mainbody{background:#FC0;width:100%;overflow:hidden;

}

.left{width:820px;height:400px;background:#36C;float:left;margin-right:20px;}

.right{width:120px;height:600px;background:#0F3;float:right;}

#footer{background:#60C;clear:

both;}

</style>

<body>

<div id="wrap">

<div id="header">头部</div>

<div id="mainbody">

<div class="left">left</div>

<div class="right">right</div>

</div>

<div id="footer"> 脚注</div>

</div>

</body>

</html>

浮动会动mainbody和footer影响，分别采取
1.width:100%;overflow:hidden;
2.clear:both;

html笔记 横向两列布局的更多相关文章

  1. CSS布局——横向两列布局

    1.固定两栏布局,使用float,注意对紧邻元素清除浮动影响.IE6在使用float布局同时设置横行margin的情况下会有双边距BUG,解决方案是加入_display:inline 代码如下: &l ...

  2. 盒子模型、网页自动居中、float浮动与清除、横向两列布局

    1.CSS包含:标准文档流,浮动,绝对定位 标准文档流的特点:从上到下,从左到右,输出文档内容 盒子模型:块级元素(div ui li dl dt p)与行级元素(span strong img in ...

  3. DIV+CSS 网页布局之：两列布局

    1.宽度自适应两列布局 两列布局可以使用浮动来完成,左列设置左浮动,右列设置右浮动,这样就省的再设置外边距了. 当元素使用了浮动之后,会对周围的元素造成影响,那么就需要清除浮动,通常使用两种方法.可以 ...

  4. 慕课笔记利用css进行布局【两列布局】

    <html> <head> <title>两列布局</title> <style type="text/css"> bo ...

  5. CSS读书笔记（1）---选择器和两列布局

    (1)CSS选择器优先权选择. 优先权从大到小的选择如下: 标有!important关键字声明的属性 HTML中的CSS样式属性 <div style="color:red" ...

  6. bootstrap的栅格布局与两列布局结合使用

    在工作中我们常常需要实现响应式布局,这个可以使用bootstrap的栅格系统来实现,我们在列里也需要实现一部分的响应式.比如下面的效果图,需要实现左边图标固定,右边的自适应 : 左边固定宽度,右边自适 ...

  7. css之页面两列布局

    两列布局:左边固定,后边自适应 第一种方法:左边的div左浮动或者是绝对定位,右边的div加margin-left:左边div的宽度 html部分 <div class="left&q ...

  8. css布局之两列布局

    我们见过两列布局的网站也很多,不过这种两列布局的分为两种:自适应和固定宽度 1.自适应两列布局 <!DOCTYPE html> <html lang="en"&g ...

  9. css两列布局，一边固定宽度，另一边自适应

    <!DOCTYPE HTML><HTML>    <head>                <meta charset="utf-8" ...

随机推荐

  1. java并发之CountDownLatch、Semaphore和CyclicBarrier

    JAVA并发包中有三个类用于同步一批线程的行为,分别是CountDownLatch.Semaphore和CyclicBarrier. CountDownLatch Java之CountDownLatc ...

  2. 法律网站分类 ­zt

    法律网站分类 ­ ­一.北大类 ­ 中国法律信息网(北大法学院)www.Chinalawinfo.com ­ ­北大金融法研究中心  www.pkufli.net ­ ­宪政知识网(北大法学院)www ...

  3. HDU 5624 KK's Reconstruction 最小生成树

    题意:这是bc round 71 div 1 的 1004 直接去看中文题意 分析: 首先,一种合法方案对应了原图的一棵生成树. 我们知道,最小生成树有一个性质是最大边最小. 因此,我们可以枚举生成树 ...

  4. WCF SOA --- AJAX 跨域请求处理 CORS for WCF

    一.问题        跨域请求无法处理的问题,由于为了阻止恶意的网站通过JS脚本来窃取正常网站受保护的资源.所由所有的浏览器的默认策略是阻止XmlHttpRequest的跨域的异步请求. 但是对于一 ...

  5. 树莓pi快速ssh【校园网】

    校园网是NAT后的,没有显示器,我把路由器的DHCP服务关了,这样的情况下怎么ssh到树莓pi? 把树莓pi 连到路由器上(已经关闭DHCP),手机安装FING https://play.google ...

  6. 设计模式_Bridge

    形象的例子: —早上碰到MM,要说早上好,晚上碰到MM,要说晚上好:碰到MM穿了件新衣服,要说你的衣服好漂亮哦,碰到MM新做的发型,要说你的头发好漂亮哦.不要问我“早上碰到MM新做了个发型怎么说”这种 ...

  7. 【译】 AWK教程指南 11递归程序

    awk 中除了函数的参数列表(Argument List)上的参数(Arguments)外,所有变量不管于何处出现,全被视为全局变量.其生命持续至程序结束——该变量不论在function外或 func ...

  8. vim讲解

    文本编辑vi使用 最好使用vim,采用sudo apt-get install vim vi是Linux及类Unix系统中主流的命令行文本编辑器,功能极为强大,vim是增强版本的vim.Vim的高级地 ...

  9. MFC定时器

    比较简单,在程序中可以找到原型. 在程序中我们经常要使用定时刷新的功能,典型的应用是在信息管理系统中表单要跟着数据库中的数据变动.MFC提供了定时器来完成这个功能. ================= ...

  10. 异常（Exception）

    1.Java中所有的异常类都会直接或间接地继承自Exception. 2.RuntimeException类也是直接继承自Exception类,它叫做运行时异常,Java中所有的运行时异常都会直接或间 ...