<!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. CVTE公司面经

    1.先是网上测评,通过后通知你参加一面. 2.关于一面:一共进行了10分钟左右,三四个人一起面,没有问什么技术. 一共问了3个问题:a.你为什么选择我们公司的这个职位.我答的大概意思是本科研究生期间, ...

  2. 单点登录技术:微软Passport单点登录协议和自由联盟规范

    随着互联网络应用的普及,越来越多的人开始使用互联网上提供的服务.然而目前提供服务的网站大多采用用户名.口令的方式来识别用户身份,这使得用户需要经常性的输入自己的用户名.口令.显然这种认证方式存在着弊端 ...

  3. Webdriver API （一）

    (转载) 1.1  下载selenium2.0的包 官方download包地址:http://code.google.com/p/selenium/downloads/list 官方User Guid ...

  4. C#给文件重命名

    使用的主要方法是: File.Move(oldFileDir,newFileDir);//这个是移动文件的方法 Directory.GetFiles(dir);//获取dir路径下的所有文件的全路径 ...

  5. P2158 [SDOI2008]仪仗队 线性筛（欧拉函数和素数表）

    上三角行恰好是[1,n-1]的欧拉函数 http://www.luogu.org/problem/show?pid=2158#sub //#pragma comment(linker, "/ ...

  6. dataStructure@ Check whether a given graph is Bipartite or not

    Check whether a given graph is Bipartite or not A Bipartite Graph is a graph whose vertices can be d ...

  7. POJ2411 - Mondriaan's Dream(状态压缩DP)

    题目大意 给定一个N*M大小的地板,要求你用1*2大小的砖块把地板铺满,问你有多少种方案? 题解 刚开始时看的是挑战程序设计竞赛上的关于铺砖块问题的讲解,研究一两天楞是没明白它代码是怎么写的,智商捉急 ...

  8. Java之正则表达式

    /*  * 正则表达式对字符串的常见操作:  * 1.匹配  *   * 2.切割  *   * 3.替换  *   * 4.获取:Pattern p = Pattern.compile(" ...

  9. hql查询技巧

    要擅于利用对象之间映射的集合去查与其关联的对象,而不是直接在dao层重新写查询的方法,其实,hibernate正是对复杂查询的一种解放,既然有现成的东西,何必再去闭门造车,而且造出来的还是个旧车. 查 ...

  10. 最清晰的ios消息推送机制教程

    研究了一下Apple Push Notification Service,实现的很简单,很环保.原理如下 财大气粗的苹果提供了一堆服务器,每个ios设备和这些服务器保持了一个长连接,ios版本更新提示 ...