<!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. android:installLocation简析

    在Froyo(android 2.2,API Level:8)中引入了android:installLocation.通过设置该属性可以使得开发者以及用户决定程序的安装位置. android:inst ...

  2. [Bhatia.Matrix Analysis.Solutions to Exercises and Problems]ExI.2.9

    (1). When $A$ is normal, the set $W(A)$ is the convex hull of the eigenvalues of $A$. For nonnormal ...

  3. alibaba笔试2

    11. 12.C 13.C 14.C 关联:http://www.codingnow.com/2000/download/lua_manual.html 15.A

  4. e2e 自动化集成测试 架构 实例 WebStorm Node.js Mocha WebDriverIO Selenium Step by step （三） SqlServer数据库的访问

    上一篇文章“e2e 自动化集成测试 架构 京东 商品搜索 实例 WebStorm Node.js Mocha WebDriverIO Selenium Step by step 二 图片验证码的识别” ...

  5. ASP.NET Web API 如何通过程序控制返回xml还是json

    雖然 ASP.NET Web API 內建支援 JSON 與 XML 兩種輸出格式,並依據瀏覽器端送出的 Accept 標頭自動決定回應的內容格式,不過有時候我們的確也需要讓程式來控制要回應哪種格式, ...

  6. MSP430单片机输入与输出

    MSP430单片机的输入输出线绝大多数是服用的,除了个别的端口外,基本上是8为为一组,不同的型号的MSP430的端口有所不同,就msp430F5438而言,一共有11个I/O端口,其中除了第十一P11 ...

  7. python join和split和strip用法

    python join 和 split方法的使用,join用来连接字符串,split恰好相反,拆分字符串的. strip()为去除开头结尾指定的字符,空着时是去除空白字符\t,\n,\r意思 1.jo ...

  8. Bzoj 4403: 序列统计 Lucas定理,组合数学,数论

    4403: 序列统计 Time Limit: 3 Sec  Memory Limit: 128 MBSubmit: 328  Solved: 162[Submit][Status][Discuss] ...

  9. [学姿势]使用AngularJS+CodeIgniter框架经验谈

    这篇文章作为总结总结7月份参与项目时遇到的新东西和问题,包括这两个框架(CodeIgniter.AngularJS)以及两个功能实现.有前端调试显示动态认证,也有用php实现功能模块. 1.添加设备 ...

  10. AutoLayout框架Masonry使用心得

    AutoLayout框架Masonry使用心得 字数1769 阅读1481 评论1 喜欢17 我们组分享会上分享了页面布局的一些写法,中途提到了AutoLayout,会后我决定将很久前挖的一个坑给填起 ...