以下是我整理的DIV+CSS常用网页布局技巧，仅供学习与参考！

第一种布局：左边固定宽度，右边自适应宽度

HTML Markup

<div id="left">Left sidebar</div>
  <div id="content">Main Content</div>

CSS Code

<style type="text/css">

*{
    margin: 0;
    padding: 0;
   }

#left {
    float: left;
    width: 220px;
    background-color: green;
   }

#content {
    background-color: orange;
    margin-left: 220px;/*==等于左边栏宽度==*/
   }
  </style>

第二种布局：左边自适应宽度,右边固定宽度

HTML Markup

<div id="wrapper" class="clearfix">
<div id="content-wrapper">
       <div id="content">
       左边的内容
       </div>
</div>
<div id="nav">
    右边的内容
</div>
</div>

CSS Code

body {
padding: 0;
margin: 0;
}

#wrapper {
width: 960px;
border: 1px solid #333;
margin: 0 auto;
}

#nav {
width: 200px;
float: right;
}

#content-wrapper {
margin-right: -200px;
float: left;
width: 100%;
}

#content {
margin-right: 200px;
padding: 0 10px;
}

.clearfix:after {
height: 0;
content: ".";
display: block;
clear: both;
visibility: hidden;
}

第三种布局：三栏布局，左右固定，中间自适应宽度

HTML Markup

div class="left">我是left</div>
<div class="right">我是right</div>
<div class="center">我是center</div>

CSS Code

body,div{ margin:0; padding:0;}
div{ height:200px; color:#F00;}
.left{ float:left; width:100px; background:#00f; _margin-right:-3px;}
.right{ float:right; width:100px; background:#0f0; _margin-left:-3px;}
.center{ background:#333; margin:0 100px; _margin:0 97px;}

IE6中的3px间隙bug

在ie6中，我们看到各列之间有一条3px的间隔，这是只有IE6才有的问题。如果中间那列的margin-left和margin-right都为0的话，则只要把左列的margin-right设为-3px,右列的margin-left设为-3px就行了。但如果把中间列的margin-left和margin-right分别为左右两列的宽度时，即使把左列的margin-right设为-3px,右列的margin-left设为-3px也还是没有效果。这时候还得把中间列的margin-left设为左列宽度-3px,margin-right设为右列宽度-3px才行

第四种布局：等高布局，即在实现上述三种布局的同时，还实现左中右区域高度相同（内容不限，以最大高度为准）

<style>
body{ padding:0; margin:0; color:#f00;}
.container{ margin:0 auto; width:600px; border:3px solid #00C;
    overflow:hidden; /*这个超出隐藏的声明在IE6里不写也是可以的*/
}
.left{ float:left; width:150px; background:#B0B0B0;
    padding-bottom:2000px;
    margin-bottom:-2000px;
}
.right{ float:left; width:450px; background:#6CC;
   padding-bottom:2000px;
   margin-bottom:-2000px;
}
</style>
</head>
<body>
<div class="container">
 <div class="left">我是left</div>
    <div class="right">我是right<br><br><br>现在我的高度比left高，但left用它的padding-bottom补偿了这部分高度</div>
    <div style="clear:both"></div>
</div>
</body>
</html>
 
实现原理：首先把列的padding-bottom设为一个足够大的值，再把列的margin-bottom设一个与前面的padding-bottom的正值相抵消的负值，父容器设置超出隐藏，这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度，当它里面的任一列高度增加了，则父容器的高度被撑到它里面最高那列的高度，其他比这列矮的列则会用它们的padding-bottom来补偿这部分高度差。因为背景是可以用在padding占用的空间里的，而且边框也是跟随padding变化的，所以就成功的完成了一个障眼法。
 

DIV+CSS常用网页布局技巧！的更多相关文章

  1. PHP.4-DIV+CSS标准网页布局准备工作（下）

    DIV+CSS标准网页布局准备工作 区块属性(区块模型) 属 性 描 述 Margin(注) 是定义区块外边界与上级元素距离的属性,用1到4个值来设置元素的边界,每个值都是长度.百分比或者auto,百 ...

  2. PHP.3-DIV+CSS标准网页布局准备工作（上）

    DIV+CSS标准网页布局准备工作(上) 概述 使用"DIV+CSS"对网站进行布局符合W3C标准,采用这种方式布局通常是为了说明与HTML表格定位方式的区别.因为现在的网站设计标 ...

  3. 总结与学习DIV+CSS网页布局技巧

    以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...

  4. 利用DIV+CSS制作网页过程中常用的基本概念及标签使

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

  5. 利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

  6. div+css对网页进行布局

    div+css对网页进行布局 首先在页面整体上进行div标签划分内容区域,然后再用css进行定位,最后再对相应的区域添加内容. 1.用div将页面划分 拿到网站页面图后,首先将分析页面分为哪几块,然后 ...

  7. CSS进阶内容——布局技巧和细节修饰

    CSS进阶内容--布局技巧和细节修饰 我们在之前的文章中已经掌握了CSS的大部分内容,但仍有一些内容我们没有涉略,这篇文章就是为了补充前面没有涉及的内容,为我们的知识做出补充并且介绍一些布局技巧 当然 ...

  8. DIV+CSS列表式布局（同意图片的应用）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. DIV+CSS常用的网页布局代码

    单行一列以下是引用片段:body { margin: 0px; padding: 0px; text-align: center; }#content { margin-left:auto; marg ...

随机推荐

  1. Adobe Illustrator里使用fontawesome矢量图标

     简单教程:1.安装FontAwesome.otf字体2.打开http://fontawesome.io/cheatsheet/3.选中图标图片,ctrl+c4.粘贴到AI中5.选中粘贴的内容,修改字 ...

  2. SVO实时全局光照优化（里程碑MK2）：Sparse Voxel Octree based Global Illumination (SVO GI)

    自主实现的实时渲染引擎,对标对象ue4/ce5,超越u3d/klayge.MK2版本侧重于质量与速度的均衡,以下上传示范均为实测截图,均为全分辨率(网页上显示缩小了)1080p/60fps.

  3. nginx做反向代理负载均衡 Java怎么获取后端服务器获取用户IP

    nginx做反向负载均衡,后端服务器获取真实客户端ip   首先,在前端nginx上需要做如下配置: location / proxy_set_hearder host                 ...

  4. nodejs配置简单HTTP服务器

    1.介绍 http-server 是一个简单的零配置命令行HTTP服务器, 基于 nodeJs. 如果你不想重复的写 nodeJs 的 web-server.js, 则可以使用这个. 2.安装 npm ...

  5. 老王教您怎么做cass7.1 8.0 9.1所有系列的复制狗 加密狗 破解狗

    cass7.1 8.0 9.1所有系列的复制狗 加密狗 破解狗本来是出于好奇看到网上有这样的东西,学了下感觉挺简单的,如果你是cass的初学者想仅仅是想学习这个软件,不想花大价格购买正版的,这个是可以 ...

  6. drupal7 Views Slideshow 简单教程

    一.下载安装(略) 二.内容类型建立(过程略,首页幻灯),字段建立(过程略)主要有2个字段,图片字段 和 指向链接字段 三.view 1.建立一个新的view,名称为frontbanner 显示为内容 ...

  7. NSObject的load和initialize方法（转）

    全文转载自:http://www.cocoachina.com/ios/20150104/10826.html 在Objective-C中,NSObject是根类,而NSObject.h的头文件中前两 ...

  8. MySQL HA方案之MySQL半复制+MHA+Keepalived+Atlas+LVS[转]

    MySQL HA方案之MySQL半复制+MHA+Keepalived+Atlas+LVS 简介 目前Mysql高可用的方案有好多,比如MMM,heartbeat+drbd,Cluster等,还有per ...

  9. 【openwrt】再设置

    https://wiki.openwrt.org/zh-cn/doc/uci/network https://wiki.openwrt.org/zh-cn/doc/uci/wireless https ...

  10. StringEx

    static class StringEx { public static string MD5(this String str) { byte[] bytes = new MD5CryptoServ ...