左宽固定，右宽自适应一：
<!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`的居中处理。 一、`div`元素的运用 `<div>`是HTML中的一个通用容器元素，用于组合其他HTML元素，为它们提供结构。在`div+css`...
CSS整体布局声明的一些使用技巧 CSS是一种功能强大的样式表语言，用于描述HTML或XML文档的呈现方式。CSS整体布局声明是一种声明方式，用于为Web页面设置通用的样式，以提高页面的可读性和美观性。在本文中，我们将...
CSS核心基础 第0课《CSS设计彻底研究》简介 ...CSS禅意花园介绍 深入CSS盒子模型 深入理解盒子模型（上） 深入理解盒子模型（下...CSS整体布局详解 固定宽度布局 不固定宽度布局（上） 不固定宽度布局（下） 综合布局实践
3. **易于更新**：如果需要修改网站的整体样式，只需更改一个CSS文件，所有引用该文件的页面都会自动更新。 4. **提高加载效率**：浏览器可以缓存CSS文件，当用户访问网站的其他页面时，如果使用了相同的样式表，...
div+css网页布局学习 div+css网页布局学习是指使用div标签和css样式来设计和布局网页的技术。...* 综合项目设计需要考虑到网页的整体布局、样式和交互性等因素 * 综合项目设计可以提高学习者的实践能力和设计能力
在网页设计领域，CSS（Cascading Style Sheets）布局是构建网页结构的关键技术。它允许开发者控制网页元素的样式、位置以及整体呈现效果。本文将深入探讨21种经典的CSS布局，这些布局方法在实践中被广泛应用，能帮助...
“CSS设计彻底研究”随书光盘视频教程目录 CSS核心基础 第0课《CSS设计彻底研究》简介 ...CSS整体布局详解 第13课 固定宽度布局 第14课 不固定宽度布局（上） 第14课 不固定宽度布局（下） 第15课 综合布局实践
你正在学习 CSS 布局吗？是不是还不能完全掌握纯 CSS 布局？通常有两种情况阻碍你的学习： 第一种可能是你还没有理解 CSS 处理页面的原理。在你考虑你的页面整体表现效果前，你应当先考虑内容的语义和结构， 然后...
在这个过程中，`external.css` 文件是一个关键元素，它是外部样式表的代表，用于存储和管理网页的整体样式规则。 1. **CSS基础** CSS的基本概念包括选择器、属性和值。选择器指向你想要应用样式的HTML元素，如`h1`...
在IT行业中，网页布局设计是构建网站不可或缺的一部分，而“DIV+CSS”技术则是实现这一目标的主流方式。本文将深入探讨DIV+CSS在博客布局中的应用，以及如何通过这种技术创造出简洁大气的网站。 首先，理解“DIV+...
1. **设置整体布局**：使整个页面居中并定义宽度。 ```css body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin: 0 auto; height: auto; width: 760px; border: 1px solid #006633...
### DIV+CSS布局大全知识点概览 #### 一、DIV+CSS布局入门 - **CSS布局原理**：在学习CSS布局之前，理解CSS处理页面的基本原理至关重要。这涉及到如何通过内容的语义和结构来组织HTML，而不是仅仅关注外观效果。 -...
在网页设计中，CSS（Cascading Style Sheets）布局是构建网页结构的关键技术。它允许开发者控制网页元素的样式、位置以及整体呈现效果。本文将深入探讨“常见的CSS布局”这一主题，涵盖基本布局概念、常见布局模式...
最后的章节提供了DIV+CSS布局的一些实用技巧，如设置网页整体居中、内容垂直居中、层的透明度以及CSS缩写。这些技巧可以帮助优化代码，提高效率，并实现更精细的控制。 颜色、盒尺寸、边框和背景是CSS中基本且重要...
第15章《CSS整体布局的实现》是整个教程的高潮部分，读者将学习到如何通过CSS实现响应式设计，使网页在不同设备和屏幕尺寸上都能保持良好的显示效果。 第12章《使用CSS制作数据表格》和第16章《使用Dreamweaver制作...
DIV+CSS完美布局 你正在学习 CSS 布局吗？是不是还不能完全掌握纯 CSS 布局？通常有两种情况阻碍你的学习： 第一种可能是你还没有理解 CSS 处理页面的原理。在你考虑你的页面整体表现效果前，你应当先考虑内容的...
最后，CSS整体布局详解是将所有这些知识整合到一起，创建出美观且功能完善的网页布局。这包括流体布局、响应式设计和自适应布局等，以确保网页在不同设备和屏幕尺寸上的良好表现。学习如何使用媒体查询进行设备适配...