两栏布局和三栏布局

作者: 机智小铛铛i | 来源:发表于2018-02-27 23:09 被阅读22次

用CSS实现布局（两栏布局，多栏布局）
CSS布局分类
布局
Flex布局
CSS Flex实现各种布局
CSS布局
两栏布局和三栏布局
两栏布局和三栏布局
CSS布局知识点
CSS边用边学（一）：一站式各种布局实践

两栏布局

1、左侧固定宽度，右侧自适应

方法一： 左侧设置float:left，右侧设置margin-left为左侧的宽度。右侧不能设置float:left。

<!doctype html>      
<html>      
    <head>      
        <style type="text/css">      
            #left{      
                width:500px;      
                height:300px;      
                float:left;     
                background:red;      
            }      
            #right{      
                height:300px;     
                margin-left:500px;  
                background:blue;      
            }      
        </style>      
    </head>      
    <body>      
        <div id="left"></div>      
        <div id="right"></div>      
    </body>      
</html>

方法二： 左侧设置float:left，右侧设置overflow:hidden。
利用的是创建一个新的BFC（块级格式化上下文）来防止文字环绕的原理来实现的。BFC就是一个相对独立的布局环境，它内部元素的布局不受外面布局的影响。

<!doctype html>    
<html>    
    <head>    
        <style type="text/css">    
            #left{    
                width:500px;    
                height:300px;    
                float:left;   
                background:red;    
            }    
            #right{    
                height:300px;     
                overflow:hidden;  
                background:blue;    
            }    
        </style>    
    </head>    
    <body>    
        <div id="left"></div>    
        <div id="right"></div>    
    </body>    
</html>

方法三： 左侧设置绝对定位，右侧设置margin-left为左边的宽度。

<!doctype html>    
<html>    
    <head>    
        <style type="text/css">    
            body{  
                margin:0;  
            }  
            #left{    
                width:500px;    
                height:300px;    
                position:absolute;  
                left:0px;  
                top:0px;  
                background:red;    
            }    
            #right{    
                height:300px;     
                margin-left:500px;  
                background:blue;    
            }    
        </style>    
    </head>    
    <body>    
        <div id="left"></div>    
        <div id="right"></div>    
    </body>    
</html>

方法四： 父元素设置display:flex,右侧设置flex:1

<!doctype html>      
<html>      
    <head>      
        <style type="text/css">      
            body{  
                display:flex;  
            }  
            #left{      
                width:500px;      
                height:300px;    
                background:red;      
            }      
            #right{      
                height:300px;     
                flex:1;  
                background:blue;      
            }      
        </style>      
    </head>      
    <body>      
        <div id="left"></div>      
        <div id="right"></div>      
    </body>      
</html>

2、右侧固定宽度，左侧自适应

方法一： 左侧设置margin-right为右侧的宽度，右侧设置float:right。

<!doctype html>  
<html>  
    <head>  
        <style type="text/css">  
            #left{  
                height:300px;  
                margin-right:300px;  
                background:red;  
            }  
            #right{  
                width:500px;  
                height:300px;  
                float:right;  
                background:blue;  
            }  
        </style>  
    </head>  
    <body>  
        <div id="right"></div>  
        <div id="left"></div>  
    </body>  
</html>

注意：right要放在left的前面，否则会出现right右浮动后内容换行下移的问题。出现该问题的原因是非float的元素和float的元素在一起时，如果非float的元素在先，那么float的元素将被排斥到下一行。由于right是float的元素，而left是非float的元素，为避免right内容换行下移，需要把right放在left的前面。
方法二： 左侧设置margin-right为右侧的宽度，右侧采用绝对定位，根据所需的右侧div与浏览器窗口的顶端和右边的距离分别设置top和right。

<!doctype html>  
<html>  
    <head>  
        <style type="text/css">  
            body{  
                margin:0;  
            }  
            #left{  
                height:300px;  
                margin-right:500px;  
                background:red;  
            }  
            #right{  
                width:500px;  
                height:300px;  
                position:absolute;  
                top:0;  
                right:0;  
                background:blue;  
        }  
        </style>  
    </head>  
    <body>  
        <div id="left"></div>  
        <div id="right"></div>  
    </body>  
</html>

此时left和right的位置前后无关紧要。
注意：由于body默认有margin，对绝对定位的right设置top:0和right:0会导致左右侧之间有缝隙且不等高，为此，可统一设置body的margin为0。
方法三： 左侧设置width为100%，float: left，margin-right为右侧的宽度的负值，右侧设置float: right。

<!doctype html>    
<html>    
    <head>    
        <style type="text/css">    
            #left{    
                height:300px;     
                float:left;  
                width:100%;  
                margin-right:-500px;                  
                background:red;    
            }    
            #right{    
                width:500px;    
                height:300px;    
                float:right;    
                background:blue;    
            }    
        </style>    
    </head>    
    <body>     
        <div id="left"></div>    
        <div id="right"></div>   
    </body>    
</html>

方法四： 父元素设置display:flex，左侧设置flex:1。

<!doctype html>        
<html>        
    <head>        
        <style type="text/css">        
            body{    
                display:flex;    
            }    
            #left{              
                height:300px;              
                flex:1;     
                background:red;        
            }        
            #right{        
                width:500px;  
                height:300px;   
                background:blue;        
            }        
        </style>        
    </head>        
    <body>        
        <div id="left"></div>        
        <div id="right"></div>        
    </body>        
</html>

三栏布局

左右固定宽度，中间自适应

方法一：左侧设置float:left，右侧设置float：right，中间设置margin-right为右侧的宽度，margin-left为左侧的宽度。

<!doctype html>  
<html>  
    <head>  
        <style type="text/css">  
            #left{  
                width:200px;  
                height:300px;  
                float:left;  
                background:red;  
            }  
            #middle{  
                height:300px;  
                margin-left:200px;  
                margin-right:500px;  
                background:blue;  
            }  
            #right{  
                width:500px;  
                height:300px;  
                float:right;  
                background:red;  
            }  
        </style>  
    </head>  
    <body>  
        <div id="left"></div>  
        <div id="right"></div>  
        <div id="middle"></div>  
    </body>  
</html>

注意：right要放在middle的前面，否则会出现right右浮动后内容换行下移的问题。出现该问题的原因是非float的元素和float的元素在一起时，如果非float的元素在先，那么float的元素将被排斥到下一行。由于right是float的元素，而middle是非float的元素，为避免right内容换行下移，需要把right放在middle的前面。

方法二： 中间设置margin-right为右侧的宽度，margin-left为左侧的宽度，左侧和右侧采用绝对定位，根据左侧div所需的left与浏览器窗口的顶端和左边的距离分别设置top和left，根据所需的右侧div与浏览器窗口的顶端和右边的距离分别设置top和right。

<!doctype html>  
<html>  
    <head>  
        <style type="text/css">  
            body{  
                margin:0;  
            }  
            #left{  
                width:200px;  
                height:300px;  
                position:absolute;  
                left:0;  
                top:0;  
                background:red;  
            }  
            #middle{  
                height:300px;  
                margin-left:200px;  
                margin-right:500px;  
                background:blue;  
            }  
            #right{  
                width:500px;  
                height:300px;  
                float:right;  
                position:absolute;  
                right:0;  
                top:0;  
                background:red;  
            }  
        </style>  
    </head>  
    <body>  
        <div id="left"></div>  
        <div id="middle"></div>  
        <div id="right"></div>  
    </body>  
</html>

此时middle和right的位置前后无关紧要。
注意：由于body默认有margin，对绝对定位的left设置top:0和left:0，right设置top:0和right:0会导致左右侧和中间之间有缝隙且不等高，为此，可统一设置body的margin为0。
方法三：父元素设置display:flex，中间设置flex:1。

<!doctype html>    
<html>    
    <head>    
        <style type="text/css">    
            body{    
                margin:0;    
                display:flex;  
            }    
            #left{    
                width:200px;    
                height:300px;     
                background:red;    
            }    
            #middle{    
                height:300px;    
                flex:1;  
                background:blue;    
            }    
            #right{    
                width:500px;    
                height:300px;  
                background:red;    
            }    
        </style>    
    </head>    
    <body>    
        <div id="left"></div>    
        <div id="middle"></div>    
        <div id="right"></div>    
    </body>    
</html>