<!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. Codeforces 629C Famil Door and Brackets DP

    题意:给你一个由括号组成的字符串,长度为m,现在希望获得一个长度为n(全由括号组成)的字符串,0<=n-m<=2000 这个长度为n的字符串要求有两个性质:1:就是任意前缀,左括号数量大于 ...

  2. MSP430主系统时钟以及430的低功耗设置

    如何将系统时钟设置到外部高频晶体振荡器,430的MCLK默认的是DCO的,如何安全的从DCO切换到外部晶体振荡器,这是一个很重要的步骤,因为经过此步骤,可以极大地提高430的处理能力,DCO在内部,可 ...

  3. ajax跨域解决方案(服务端仅限java)

    楼主前端知识菜鸟,高手勿喷,在此记录工作中遇到的问题及解决方案,大神请滤过 方法1.jsonp(js客户端ajax请求参数方式设置) 方法2.服务端接口设置: HttpServletResponse ...

  4. php中的字符串和正则表达式

    一.字符串类型的特点 1.PHP是弱类型语言,其他数据类型一般都可以直接应用于字符串函数操作. 1: <?php //输出345 //输出345 //先查找hello常量,若没找到,将hello ...

  5. CCF 认证

    题意:字符串替换 string+map的应用 #include<iostream> #include<stdio.h> #include<stdlib.h> #in ...

  6. IE比Chrome强的一个地方

    今天在开发时,调试一个功能.死活显示和同事不一样,他是测试过正常的,我的Chrome显示死活不对. 最后要重新部署了,才想起会不会是缓存的问题.清除Chrome缓存,再一试,一切正常. IE有一个功能 ...

  7. ListView inside a ScrollView

    ScrollView里面放ListView, ListView无法展开的解决方法 http://stackoverflow.com/questions/18367522/android-list-vi ...

  8. Delphi XE5 安卓手机要求

    1 ARMv7 的 CPU v6 的肯定不支持. 2 黑屏是因为你的手机 CPU 不支持 NEON 特性.或者是 T2 海思 CPU .这 2 个不支持. 3 系统版本  2.3.3 到 2.3.9 ...

  9. 获取本机IP地址和MAC地址

    unit NetFunc; interface uses SysUtils, Windows, dialogs, winsock, Classes, ComObj, WinInet, Variants ...

  10. hdoj 4548 美素数

    美素数 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others)Total Submiss ...