左宽固定，右宽自适应一：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>左宽固定，右宽自适应</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.left {
width: 220px;
float: left;
border: 1px solid gray;
}
.right {
margin-left: 225px;
border: 1px solid gray;
}
</style>
</head>
<body>
<div class="left">left</div>
<div class="right">right</div>
</body>
</html>
左宽固定，右宽自适应二：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>左宽固定，右宽自适应</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.left {
width: 220px;
float: left;
margin-right: -100%;
background-color: red;
}
.right {
float: left;
width: 100%;
}
.right-content {
margin-left: 225px;
background-color: blue;
}
</style>
</head>
<body>
<div class="left">left</div>
<div class="right">
<div class="right-content">
right-content
</div>
</div>
</body>
</html>
左宽固定，右宽自适应三：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>左宽固定，右宽自适应</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.right {
width: 100%;
float: left;
}
.right-content {
margin: 0px 0px 0px 210px;
background-color: red;
}
.left {
float: left;
margin-left: -100%;
width: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="right">
<div class="right-content">right-content</div>
</div>
<div class="left">left</div>
</body>
</html>
左宽固定，右宽及左右高度自适应一：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>左宽固定，右宽及左右高度自适应一</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
height: auto;
}
body {
margin: 0;
padding: 0;
}
#container {
background: #ffe3a6;
}
#wrapper {
display: inline-block;
border-left: 200px solid #d4c376;
position: relative;
vertical-align: bottom;
}
#sidebar {
float: left;
width: 200px;
margin-left: -200px;
position: relative;
}
#main {
float: left;
}
#sidebar, #main {
min-height: 200px;
height: auto !important;
height: 200px;
}
</style>
</head>
<body>
<div id="container">
<div id="wrapper">
<div id="sidebar">Left Sidebar</div>
<div id="main">Main Content</div>
</div>
</div>
</body>
</html>
左宽固定，右宽及左右高度自适应二：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>左宽固定，右宽及左右高度自适应二</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#container {
overflow: hidden;
}
#left {
background: #ccc;
float: left;
width: 200px;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
#content {
background: #eee;
margin-left: 200px;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
#left, #content {
min-height: 25px;
height: auto !important;
height: 25px;
}
</style>
</head>
<body>
<div id="container">
<div id="left" class="aside">Left Sidebar<br />Left Sidebar<br />Left Sidebar<br />Left Sidebar<br /></div>
<div id="content" class="section">Main Content</div>
</div>
</body>
</html>
左宽固定，右宽及左右高度自适应三：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>左宽固定，右宽及左右高度自适应三</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#container{
background-color:#0ff;
overflow:hidden;
padding-left:220px;
}
* html #container{
height:1%;
}
#content{
background-color:#0ff;
width:100%;
border-left:220px solid #f00;
margin-left:-220px;
float:right;
}
#sidebar{
background-color:#f00;
width:220px;
float:right;
margin-left:-220px;
}
#content, #sidebar {
min-height: 200px;
height: auto !important;
height: 200px;
}
</style>
</head>
<body>
<div id="container">
<div id="content">Main Content</div>
<div id="sidebar">Left Sidebar</div>
</div>
</body>
</html>
左宽固定，右宽及左右高度自适应四：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>左宽固定，右宽及左右高度自适应四</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#container2 {
float: left;
width: 100%;
background: orange;
position: relative;
overflow: hidden;
}
#container1 {
float: left;
width: 100%;
background: green;
position: relative;
left: 220px;
}
#col2 {
position: relative;
margin-right: 220px;
}
#col1 {
width: 220px;
float: left;
position: relative;
margin-left: -220px;
}
#col1, #col2 {
min-height: 200px;
height: auto !important;
height: 200px;
}
</style>
</head>
<body>
<div id="container2">
<div id="container1">
<div id="col1">Left Sidebar</div>
<div id="col2">Main Content</div>
</div>
</div>
</body>
</html>
左宽固定，右宽及左右高度自适应五：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>左宽固定，右宽及左右高度自适应五</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#container1 {
float: left;
width: 100%;
overflow: hidden;
position: relative;
background-color: #dbddbb;
}
#container {
background-color: orange;
width: 100%;
float: left;
position: relative;
left: 220px;
}
#left {
float: left;
margin-right: -100%;
margin-left: -220px;
width: 220px;
}
#content {
float: left;
width: 100%;
margin-left: -220px;
}
#contentInner {
margin-left: 220px;
overflow: hidden;
}
#left, #content {
min-height: 200px;
height: auto !important;
height: 200px;
}
</style>
</head>
<body>
<div id="container1">
<div id="container">
<div id="left">Left Sidebar</div>
<div id="content">
<div id="contentInner">Main Content</div>
</div>
</div>
</div>
</body>
</html>
三列宽度高度自适应：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>三列宽度高度自适应</title>
<style type="text/css">
#container3 {
float: left;
width: 100%;
background: green;
overflow: hidden;
position: relative;
}
#container2 {
float: left;
width: 100%;
background: yellow;
position: relative;
right: 30%;
}
#container1 {
float: left;
width: 100%;
background: orange;
position: relative;
right: 40%;
}
#col1 {
float:left;
width:26%;
position: relative;
left: 72%;
overflow: hidden;
}
#col2 {
float:left;
width:36%;
position: relative;
left: 76%;
overflow: hidden;
}
#col3 {
float:left;
width:26%;
position: relative;
left: 80%;
overflow: hidden;
}
</style>
</head>
<body>
<div id="container3">
<div id="container2">
<div id="container1">
<div id="col1">Column 1<br />Column 1<br />Column 1<br /></div>
<div id="col2">Column 2</div>
<div id="col3">Column 3</div>
</div>
</div>
</div>
</body>
</html>
相关推荐
实现div+css的整体布局的实例，可以更好地理解这种布局，其中关于float用的比较多，还有div居中处理
CSS整体布局声明的一些使用技巧
CSS核心基础 第0课《CSS设计彻底研究》简介 ...CSS禅意花园介绍 深入CSS盒子模型 深入理解盒子模型（上） 深入理解盒子模型（下...CSS整体布局详解 固定宽度布局 不固定宽度布局（上） 不固定宽度布局（下） 综合布局实践
“CSS设计彻底研究”随书光盘视频教程目录 CSS核心基础 第0课《CSS设计彻底研究》简介 ...CSS整体布局详解 第13课 固定宽度布局 第14课 不固定宽度布局（上） 第14课 不固定宽度布局（下） 第15课 综合布局实践
你正在学习 CSS 布局吗？是不是还不能完全掌握纯 CSS 布局？通常有两种情况阻碍你的学习： 第一种可能是你还没有理解 CSS 处理页面的原理。在你考虑你的页面整体表现效果前，你应当先考虑内容的语义和结构， 然后...
DIV+CSS完美布局 你正在学习 CSS 布局吗？是不是还不能完全掌握纯 CSS 布局？通常有两种情况阻碍你的学习： 第一种可能是你还没有理解 CSS 处理页面的原理。在你考虑你的页面整体表现效果前，你应当先考虑内容的...
虽然图片不是非常清析，但从图中我们可以看到作者是如何进行整体CSS布局构思的，把它贴出来，供大家参考： ... [阅读全文] [PDF] 标签：divcss布局实例 divcss布局大全 divcss网页布局 divcss布局 2008年9月26日...
如果想学好Div+CSS布局就下这个资源 诚信可靠 Div+CSS布局入门教程资源.rar Div+CSS布局入门教程.doc ...2写入整体层结构与CSS.doc 3页面顶部制作之一.doc 4页面顶部制作之二.doc 5页面制作-用好border和clear.doc
你正在学习 CSS 布局吗？是不是还不能完全掌握纯 CSS 布局？通常有两种情况阻碍你的学习： 第一种可能是你还没有理解 CSS 处理页面的原理。在你考虑你的页面整体表现效果前，你应当先考虑内容的语义和结构， 然后...
在你考虑你的页面整体表现效果前，你应当先考虑内容的语义和结构，然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。 另一种原因是你对那些非常熟悉的表现层属性(例如：cellpadding,、hspace、...
第10章 理解CSS定位与div布局 10.1 div 标记与 span 标记 10.2 盒子模型 10.3 元素的定位 10.4 定位实例一：轻轻松松给图片签名 10.5 定位实例二：文字阴影效果 第11章 CSS+div布局...
一个基于css的一个页面布局整体框架。分为header部分，左边栏，内容区【主显示内容区，footer区】，
在这个信息纵横的时代,网络社区空前繁荣，FackBook及myspace... 学生社区版 <br>* 拥有产品基础功能插件 * 兼容IE6 IE7 火狐等主流浏览器 * 数据库Sql Server 2005 * DIV+CSS整体布局 * Ajax技术支持
学生社区版 <br> * 拥有产品基础功能插件 * 兼容IE6 IE7 火狐等主流浏览器 * 数据库Sql Server 2005 * DIV+CSS整体布局 * Ajax技术支持 * 专为学生社区量身定做
这个文档主要讲关于网站div-css布局一些很使用的基本知识，主要有以下几个方面：一、页面布局与规划，二、写入整体层结构与CSS ，三、页面顶部制作之一，四、页面顶部制作之二，五、页面制作-用好border和clear ...
CSS设计彻底研究+代码书中实例(全) CSS 设计 研究 代码 前沿教室 CSS核心基础 深入CSS盒子模型 CSS导航设计 CSS高级样式设计 CSS整体布局详解
第10章 理解CSS定位与div布局 10.1 div 标记与 span 标记 10.2 盒子模型 10.3 元素的定位 10.4 定位实例一：轻轻松松给图片签名 10.5 定位实例二：文字阴影效果 第11章 CSS+div...
DIV CSS布局大全,对刚学习了css还不知道怎么整体布局，及经常遇到的问题有详细的介绍。
精通CSS+DIV网页样式与布局 视频教材主要内容 迅雷下载地址： 目录 第1部分 CSS基础知识篇 第1章 CSS的初步体验 1.1 CSS的概念 1.1.1 标记的概念 1.1.2 传统HTML的缺点 1.1.3 CSS的引入 1.1.4...