zoukankan html css js c++ java

三列布局，读《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>

View Code

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部分

查看全文

相关阅读:
正则表达式
 JS逻辑算法
 js函数
 JS运算符的应用
 JS课堂笔记
 json模块学习
 什么是面向对象，以及如何定义对象，实例化对象
 什么是面向过程，以及代码展示
 什么是元类，以及用type类来产生类.
python下载安装

原文地址：https://www.cnblogs.com/shenfangfang/p/4969046.html