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那些事儿》的更多相关文章

  1. CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼

    今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...

  2. 简单的CSS网页布局--三列布局

    三列布局其实不难,不过要用到position:absolute这个属性,因为这个属性是基于浏览器而言,左右部分各放在左右侧,空出中间一列来实现三列布局. (一)三列布局自适应 <!DOCTYPE ...

  3. css实现三列布局，左右固定值，中间自适应。

    这里主要用到的是position:absolute;及margin属性;代码很简单,一看就明白. <!DOCTYPE html> <html lang="zh_CN&quo ...

  4. css常见的各种布局下----三列布局

    css 三列布局,左右固定宽度右边自适应 1不使用定位,只使用浮动可以实现左右固定,中间宽度自适应布局 1.1.1 自适应部分一定要放第一个位子,使用浮动,并且设置宽度为100%,不设置浮动元素内容不 ...

  5. css三列布局之双飞翼pk圣杯

    三列布局:两边定宽,中间自适应! 看到这个问题,我第一眼想的就是两边定宽float左右,中间加一个margin宽度自适应或者直接设一个overflow:hidden触发bfc机制,这样也可以,看上去也 ...

  6. 慕课笔记利用css进行布局【三列布局】

    三个div中间自适应,两侧固定大小 <html> <head> <title>三列布局</title> <style type="tex ...

  7. CSS常用布局方式-两列布局、三列布局

    CSS基础 2.几种布局方式1)table布局 当年主流的布局方式,第一种是通过table tr td布局 示例: <style type="text/css"> ta ...

  8. [CSS布局]简单的CSS三列布局

    前言 公司终于可以上外网了,近期在搞RN的东西,暂时脑子有点晕,等过段时间再来写点总结.倒是最近有个新学前端的同学经常会问一些基础知识,工作空闲写了小Demo给他看,全是很基础的知识,纯粹是顺便记录在 ...

  9. HTML/CSS学习之 三列布局，其中左侧和右侧的部分宽度固定，中间部分宽度随浏览器宽度的变化而自适应变化

    第一种方法:绝对定位 <!DOCTYPE html> <html> <head> <title>三列布局</title> <link ...

随机推荐

  1. LeetCode OJ 217.Contains Duplicate

    Given an array of integers, find if the array contains any duplicates. Your function should return t ...

  2. OpenCV——mixChannels函数

    mixChannels Copies specified channels from input arrays to the specified channels of output arrays. ...

  3. android网络编程之HttpUrlConnection的讲解--实现文件断点下载

    1.没有实现服务器端,下载地址为网上的一个下载链接. 2.网络开发不要忘记在配置文件中添加访问网络的权限 <uses-permission android:name="android. ...

  4. Git 开发新的功能分支

    软件开发中,总有无穷无尽的新的功能要不断的添加进来.添加一个新功能时,你肯定不希望因为一些实验性质的代码把主分支搞乱了, 所以每添加一个新功能,最好新建一个feature分支,在上面开发,完成后,合并 ...

  5. php---数组序列化

    有两种选择:serialize,json_encode. 需求:对数组进行序列化后保存在文件中,以便爬虫来抓取文件.并且序列化后的字符串只有一行,不希望在该字符串中出现换行,即使数组中某个元素中有换行 ...

  6. jquery滚动条加载数据

    //滚动条  $(window).scroll(function () {   var scrollTop = $(this).scrollTop();   var scrollHeight = $( ...

  7. linux压缩和解压缩命令

    压缩:tar -zcvf 名称.tar.gz 文件夹 解压:tar -zxvf 包名.tar.gz 解压路径

  8. Springmvc默认首页的问题

    之前自己写的springmvc 默认首页都是偷懒方式: web.xml 中定义的默认首页: <welcome-file-list> <welcome-file>index.ht ...

  9. Spring Boot 系列教程10-freemarker导出word下载

    freemarker FreeMarker是一款模板引擎: 即一种基于模板和要改变的数据, 并用来生成输出文本(HTML网页.电子邮件.配置文件.源代码等)的通用工具. 它不是面向最终用户的,而是一个 ...

  10. [转]JSONObject与JSONArray的使用

    http://www.cnblogs.com/xwdreamer/archive/2011/12/16/2296904.html 参考文献: http://blog.csdn.net/huangwuy ...