三列布局，读《css那些事儿》
1、两列定宽，中间自适应
要点：浮动、负边距效果、mainbox增加内容div并设置margin、:after清除浮动
原理：mainbox的浮动并将其宽度设置为100%，次要内容及侧边栏设置固定宽度并浮动，mainbox中的.contentd的默认宽度设置为值（auto），margin左右所留的空白等于两列的宽度，并利用负边距原理将次要内容和侧边栏“引”到主要内容的两边。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!--
要点：浮动、负边距效果、mainbox增加内容div并设置margin、:after清除浮动、js实现等高
原理：mainbox的浮动并将其宽度设置为100%，次要内容及侧边栏设置固定宽度并浮动，mainbox中的.contentd的默认宽度设置为值（auto），margin左右所留的空白等于两列的宽度，并利用负边距原理将次要内容和侧边栏“引”到主要内容的两边。。-->
<style type="text/css">
*{padding:0;margin:0;}
.mainbox{background:#ccc;width:100%;float:left;}
.mainbox .content{margin:0 210px 0 0;background:red}
.sidebox{width: 200px;float:left;background:green;margin-left:-200px;}
.footer{background:yellow}
.container:after {
display:block;
visibility:hidden;
font-size:0;
line-height:0;
clear:both;
content:"";
}
</style>
</head>
<body>
<div class="container" >
<div class="mainbox" id="mainbox">
<div class="content">
<h1> mainbox</h1> <p>春眠不觉晓</p> <p>处处闻啼鸟</p> <p>夜来风雨声</p> <p>花落知多少</p>
</div>
</div>
<div class="sidebox" id="sidebox">
<h1> sidebox</h1> <p>春眠不觉晓</p> <p>处处闻啼鸟</p> </div>
</div>
<div class="footer"><h1>footer底部</h1></div> <!--增加js代码实现两列等高-->
<script type="text/javascript">
var mh = document.getElementById('mainbox');
var sh = document.getElementById('sidebox');
if (mh.clientHeight < sh.clientHeight)
{
mh.style.height = sh.clientHeight + "px";
} else {
sh.style.height = mh.clientHeight + "px";
}
</script>
</body>
</html>
两列定宽，中间自适应
2、三列自适应方法1
要点：浮动、负边距效果、mainbox增加内容div并设置margin、:after清除浮动、负边距实现等高
原理：宽度及margin值使用百分比形式，原理可参考1、两列定宽，中间自适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!--原理可参考三列布局：两列定宽，中间自适应，宽度及margin值使用百分比。
要点：浮动、负边距效果、mainbox增加内容div并设置margin、:after清除浮动、负边距实现等高 -->
<style type="text/css">
*{padding:0;margin:0;} .container{ overflow:hidden;}/*负边距实现等高效果必须条件三*/
.mainbox{float:left;background:red;width:100%;}
.mainbox .content{margin:0 40% 0 20%}
.subminbox{width:20%;float:left;background:yellow;margin-left:-100%;}
.sidebox{width: 40%;float:left;background:green;margin-left:-40%;}
.footer{background:darkseagreen;clear:both;} .sidebox,.mainbox,.subminbox{
margin-bottom:-9999px; /* 负边距实现等高效果必须条件一 */
padding-bottom:9999px; /* 负边距实现等高效果必须条件二 */}
</style>
</head>
<body>
<div class="container">
<div class="mainbox">
<div class="content">
<h1>maibox主要内容</h1>
<p>春眠不觉晓</p> <p>处处闻啼鸟</p> <p>夜来风雨声</p> <p>花落知多少</p></div>
</div>
<div class="subminbox"><h1>subminbox次要内容</h1></div>
<div class="sidebox"><h1>sidebox侧边栏</h1></div>
</div>
<div class="footer"><h1>footer底部</h1></div> </body>
</html>
三列自适应方法1
3、三列自适应方法2
要点：浮动、宽度分别设置百分比
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!--
要点：浮动、宽度分别设置百分比、等高实现-->
<style type="text/css">
*{padding:0;margin:0;}
.mainbox{background:red;width:60%;float:left;}
.subminbox{width:30%;float:left;background:yellow;}
.sidebox{width: 10%;float:left;background:green;}
.footer{clear:both;}
</style>
</head>
<body>
<div class="container">
<div class="mainbox" id="mainbox">
<h1>maibox主要内容</h1>
<p>春眠不觉晓</p> <p>处处闻啼鸟</p> <p>夜来风雨声</p> <p>花落知多少</p>
</div>
<div class="subminbox" id="subminbox"><h1>subminbox次要内容</h1></div>
<div class="sidebox" id="sidebox"><h1>sidebox侧边栏</h1></div>
</div>
<div class="footer"><h1>footer底部</h1></div> </body>
</html>
4、一列定宽，两列自适应
主要原理是mainbox的浮动并将其宽度设置为100%，将subminbox宽度设置为百分比，将sidebox宽度设置为固定值，
再利用mainbox中的.contentd的默认宽度值（auto）与margin左右所留的空白，及利用负边距原理将次要内容和侧边栏“引”到主要内容的两边。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三列布局，一列定宽，两列自适应</title>
<!--主要原理是mainbox的浮动并将其宽度设置为100%，将subminbox宽度设置为百分比，将sidebox宽度设置为固定值，
再利用mainbox中的.contentd的默认宽度值（auto）与margin左右所留的空白，及利用负边距原理将次要内容和侧边栏“引”到主要内容的两边。-->
<style type="text/css">
*{padding:0;margin:0;}
/*设置主要内容的外层div标签浮动，并将宽度设置为100%；*/
.mainbox{background:red;width:100%;float:left;}
/*设置主要内容的内层div的magin值，留出空白位置给左右两列，要注意左侧的magin值为百分比，意味着左侧留出的空白位置是自适应的*/
.mainbox .content{margin:0 200px 0 40%}
/*将次要内容设置左浮动，并设置宽度为40%，左侧边距为-100%*/
.subminbox{width:40%;float:left;background:yellow;margin-left:-100%;}
/*将侧边距设置左浮动，并设置宽度为200px，负边距为左侧-200px*/
.sidebox{width: 200px;float:left;background:green;margin-left:-200px;}
.footer{clear:both;}
</style>
</head>
<body>
<div class="container">
<div class="mainbox">
<div class="content"><h1>maibox主要内容</h1></div>
</div>
<div class="subminbox"><h1>subminbox次要内容</h1></div>
<div class="sidebox"><h1>sidebox侧边栏</h1></div>
</div>
<div class="footer"><h1>footer底部</h1></div> </body>
</html>
一列定宽，两列自适应
5、实现三列等高
方法1：负边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!--要点与原理同两列等高方法1-->
<style type="text/css">
* {
margin:0;
padding:0;
}
.header, .footer {
/*height:30px;*/
/*line-height:30px;*/
/*text-align:center;*/
color:#FFFFFF;
background-color:#AAAAAA;
}
.container {
float:left;
width:100%;
text-align:center;
overflow:hidden; /* 截去超过.container标签之外的多余部分 */
color:#FFFFFF;
}
.mainBox {
float:left;
width:100%;
margin-bottom:-9999px; /* 负边距实现等高效果必须条件一 */
padding-bottom:9999px; /* 负边距实现等高效果必须条件二 */
}
.mainBox .content {
margin:0 21% 0 41%;
background-color:#000000;
}
.subMainBox {
float:left;
width:40%;
margin-left:-100%;
margin-bottom:-9999px; /* 负边距实现等高效果必须条件一 */
padding-bottom:9999px; /* 负边距实现等高效果必须条件二 */
background-color:#666666;
}
.sideBox {
float:left;
width:20%;
margin-left:-20%;
margin-bottom:-9999px; /* 负边距实现等高效果必须条件一 */
padding-bottom:9999px; /* 负边距实现等高效果必须条件二 */
background-color:#666666;
}
.footer {
clear:both;
} </style>
</head>
<body>
<!-- 三列等高（负边距实现-自适应宽度）-->
<div class="header">头部信息</div>
<div class="container">
<div class="mainBox">
<div class="content">
<p>主要内容区域</p>
<p>多一点文字信息</p>
<p>更能看得清楚到底是是不是等高</p>
<p>吃饱了才会撑开</p>
<p>差不多饱了</p>
<p>不用太饱~</p>
</div>
</div>
<div class="subMainBox">次要内容区域</div>
<div class="sideBox">侧边栏</div>
</div>
<div class="footer">底部信息</div> </body>
</html>
三列等高-负边距实现
方法2：js实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!--使用js实现三列等高,引用equalColumns.js-->
<script type="text/javascript" src="css/equalColumns.js"></script>
</head>
<style type="text/css">
* {
margin:0;
padding:0;
}
.header, .footer {
height:30px;
line-height:30px;
text-align:center;
color:#FFFFFF;
background-color:#AAAAAA;
}
.container {
float:left;
width:100%;
text-align:center;
color:#FFFFFF;
}
.mainBox {
float:left;
width:100%;
}
.mainBox .content {
margin:0 21% 0 41%;
background-color:#000000;
}
.subMainBox {
float:left;
width:40%;
margin-left:-100%;
background-color:#666666;
}
.sideBox {
float:left;
width:20%;
margin-left:-20%;
background-color:#666666;
}
.footer {
clear:both;
} </style>
</head>
<body onload="equalColumns('subMainBox','m_content','sideBox')">
<!-- 三列等高（负边距实现-自适应宽度）-->
<div class="header">头部信息</div>
<div class="container">
<div class="mainBox" >
<div class="content" id="m_content">
<p>主要内容区域</p>
<p>多一点文字信息</p>
<p>更能看得清楚到底是是不是等高</p>
<p>吃饱了才会撑开</p>
<p>差不多饱了</p>
<p>不用太饱~</p>
</div>
</div>
<div class="subMainBox" id="subMainBox">次要内容区域</div>
<div class="sideBox" id="sideBox">侧边栏</div>
</div>
<div class="footer">底部信息</div> </body>
</html>
三列等高-html部分
//div等高控制
function columnHeight(){
var i,oh,hh,h=0,dA=document.w3cooleqc,an=document.w3cooleqa;
if(dA && dA.length){
an=1;
for(i=0;i<dA.length;i++){
dA[i].style.height='auto';
}
for(i=0;i<dA.length;i++){
oh=dA[i].offsetHeight;
h=(oh>h)?oh:h;
}
for(i=0;i<dA.length;i++){
if(an){
dA[i].style.height=h+'px';
}else{
equalActive(dA[i].id,dA[i].offsetHeight,h);
}
}
if(an){
for(i=0;i<dA.length;i++){
hh=dA[i].offsetHeight;
if(hh>h){
dA[i].style.height=(h-(hh-h))+'px';
}
}
}else{
document.w3cooleqa=1;
}
document.w3cooleqth=document.body.offsetHeight;
document.w3cooleqtw=document.body.offsetWidth;
}
}
function blanceHeight(){
if(document.w3cooleqth!=document.body.offsetHeight||document.w3cooleqtw!=document.body.offsetWidth){
columnHeight();
}
}
function equalColumns(){
if(document.getElementById){
document.w3cooleqc=new Array;
for(i=0;i<arguments.length;i++){
document.w3cooleqc[i]=document.getElementById(arguments[i]);
}
setInterval("blanceHeight()",10);
}
}
function equalActive(el,h,ht){
var sp=1000,inc=1000,nh=h,g=document.getElementById(el),oh=g.offsetHeight,ch=parseInt(g.style.height);
ch=(ch)?ch:h;
var ad=oh-ch,adT=ht-ad;nh+=inc;nh=(nh>adT)?adT:nh;g.style.height=nh+'px';
oh=g.offsetHeight;
if(oh>ht){
nh=(ht-(oh-ht));g.style.height=nh+'px';
}
if(nh<adT){setTimeout("equalActive('"+el+"',"+nh+","+ht+")",sp);}
}
//调用方法<body onload="equalColumns('subMainBox','m_content','sideBox')">
//subMainBox，m_content，sideBox就是你希望高度相等的div的id值
js部分
三列布局，读《css那些事儿》的更多相关文章
- CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼
今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...
- 简单的CSS网页布局--三列布局
三列布局其实不难,不过要用到position:absolute这个属性,因为这个属性是基于浏览器而言,左右部分各放在左右侧,空出中间一列来实现三列布局. (一)三列布局自适应 <!DOCTYPE ...
- css实现三列布局，左右固定值，中间自适应。
这里主要用到的是position:absolute;及margin属性;代码很简单,一看就明白. <!DOCTYPE html> <html lang="zh_CN&quo ...
- css常见的各种布局下----三列布局
css 三列布局,左右固定宽度右边自适应 1不使用定位,只使用浮动可以实现左右固定,中间宽度自适应布局 1.1.1 自适应部分一定要放第一个位子,使用浮动,并且设置宽度为100%,不设置浮动元素内容不 ...
- css三列布局之双飞翼pk圣杯
三列布局:两边定宽,中间自适应! 看到这个问题,我第一眼想的就是两边定宽float左右,中间加一个margin宽度自适应或者直接设一个overflow:hidden触发bfc机制,这样也可以,看上去也 ...
- 慕课笔记利用css进行布局【三列布局】
三个div中间自适应,两侧固定大小 <html> <head> <title>三列布局</title> <style type="tex ...
- CSS常用布局方式-两列布局、三列布局
CSS基础 2.几种布局方式1)table布局 当年主流的布局方式,第一种是通过table tr td布局 示例: <style type="text/css"> ta ...
- [CSS布局]简单的CSS三列布局
前言 公司终于可以上外网了,近期在搞RN的东西,暂时脑子有点晕,等过段时间再来写点总结.倒是最近有个新学前端的同学经常会问一些基础知识,工作空闲写了小Demo给他看,全是很基础的知识,纯粹是顺便记录在 ...
- HTML/CSS学习之 三列布局，其中左侧和右侧的部分宽度固定，中间部分宽度随浏览器宽度的变化而自适应变化
第一种方法:绝对定位 <!DOCTYPE html> <html> <head> <title>三列布局</title> <link ...
随机推荐
- 【超级干货】手机移动端WEB资源整合：转载
转载于:http://www.w3cfuns.com/notes/24611/fbba9cbd616e795360ea45515494aa53.html meta基础知识 H5页面窗口自动调整到设备宽 ...
- 克隆虚拟机系统整个文件快照，然后另起建立该系统，产生的IP地址冲突解决办法
进入克隆后的文件系统 cd /etc/sysconfig/network-scripts/ cp ifcfg-eth0 ifcfg-eth1 vim ifcfg-eth1 #修改其中的文件内容 ...
- Android onTouchEvent方法
onTouchEvent方法简介 前面已经介绍了手机键盘事件的处理方法,接下来将介绍手机屏幕事件的处理方法onTouchEvent.该方法在View类中的定义,并且所有的View子类全部重写了该方法, ...
- 使用rsync命令提高文件传输效率
众多数据库服务器的管理过程中,在不同服务器间的文件传输是免不了的.您可以使用scp命令或FTP方法完成文件的发送和接收,这篇文章我将给大家介绍另外一种方法,这就是rsync命令.rsync是文件传输程 ...
- wlcore: firmware chunk too long
insmod wlcore_sdio.ko 的时候出现的错误 43.767890] Powering on wl12xx [ 143.846003] Powering off wl12xx [ 1 ...
- wpf之Popup弹出自定义输入"键盘"
在很多工厂的信息化MES系统中,车间的采集数据的机器是触摸屏电脑(工厂环境所限,用外接鼠标键盘反而不方便). 由于没有外接键盘,所以用户无法像坐在办公室一样,用鼠标键盘进行录入信息. 这时我们可以用w ...
- sql server字段是逗号分割的id，关联明细表查询
有时候一张表的一个字段是以逗号分割的一个字符串,分割的数字是明细表的主键id. 关联明细表查询可以这样做: ) ) --这是把areanos字段赋值给@areanos变量 set @areanos=' ...
- 编写Linux/Unix守护进程
原文: http://www.cnblogs.com/haimingwey/archive/2012/04/25/2470190.html 守护进程在Linux/Unix系统中有着广泛的应用.有时,开 ...
- idea编译器中maven项目获取路径的方法
资源文件放在哪里? 上 图中的 resources 目录叫资源目录 (main下,与java如果没有请自行创建), 在项目编译后文件会被放到红色的 classes 目录下, 注意如果你的 resour ...
- jquery 限制字数 显示输入字数 插件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...