第五章三列和多列布局

1.三列或多列布局与两列布局的微妙关系

1）三列布局可以看成是两个两列布局的组合，其html结构可以写成如下

    <div class ="header">头部信息</div>
    <div class ="container">
        <div class ="wrap">
            <div class ="mainBox">主要内容区域</div>
            <div class ="subMainBox">次要内容区域</div>
        </div>
        <div class ="sideBox" >侧边栏</div>
    </div>
    <div class ="footer">底部信息</div>

2）三列布局也可以是三个单独的列并排，此时只是比两列布局多了一个列，html结构如下

    <div class ="header">头部信息</div>
    <div class ="container">
        <div class ="mainBox">主要内容区域</div>
        <div class ="subMainBox">次要内容区域</div>
        <div class ="sideBox" >侧边栏</div>
    </div>
    <div class ="footer">底部信息</div>

不管是什么样的组合方式都是从两列布局演变而来的。

2.两列定宽中间自适应

html结构如下

    <div class ="header">头部信息</div>
    <div class ="container">
        <div class ="mainBox">
            <div class ="content">主要内容区域</div>
        </div>
        <div class ="subMainBox">次要内容区域</div>
        <div class ="sideBox" >侧边栏</div>
    </div>
    <div class ="footer">底部信息</div>

CSS

    <style type ="text/css" >
        *{ padding :0; margin:0;}
        .header,.footer{ height:30px; color:#FFF; background-color :#AAA; line-height:30px; text-align :center; }
        .container{ text-align:center; color :#FFF; }
        .mainBox{ float:left ; width :100%; background-color:#FFF;}
        .mainBox .content{ background-color:#000; margin:0 200px 0 300px;}
        .subMainBox{ float:left; background-color:#666; width :300px; margin-left:-100%;}
        .sideBox{ float:left; background-color:#666; width :200px; margin-left:-200px;}
        .container:after{ content:""; display:block; height:0 ; line-height:0; font-size:0; visibility :hidden; clear:both;}
    </style>

原理：通过左右边距留出左右两列的位置，再通过浮动和负边距使得三列并排在一行，content未设置宽度，根据父容器自适应从而达到中间自适应效果

3.左侧定宽，右侧及中间自适应

只需要改变上面例子的宽度就可以了

    <style type ="text/css" >
        *{ padding :0; margin:0;}
        .header,.footer{ height:30px; color:#FFF; background-color :#AAA; line-height:30px; text-align :center; }
        .container{ text-align:center; color :#FFF; }
        .mainBox{ float:left ; width :100%; background-color:#FFF;}
        .mainBox .content{ background-color:#000; margin:0 200px 0 40%;}
        .subMainBox{ float:left; background-color:#666; width :40%; margin-left:-100%;}
        .sideBox{ float:left; background-color:#666; width :200px; margin-left:-200px;}
        .container:after{ content:""; display:block; height:0 ; line-height:0; font-size:0; visibility :hidden; clear:both;}
    </style>

如果需要对调左右两边的位置可以这样

    <style type ="text/css" >
        *{ padding :0; margin:0;}
        .header,.footer{ height:30px; color:#FFF; background-color :#AAA; line-height:30px; text-align :center; }
        .container{ text-align:center; color :#FFF; }
        .mainBox{ float:left ; width :100%; background-color:#FFF;}
        .mainBox .content{ background-color:#000; margin:0 40% 0 200px;}
        .subMainBox{ float:left; background-color:#666; width :40%; margin-left:-40%;}
        .sideBox{ float:left; background-color:#666; width :200px; margin-left:-100%;}
        .container:after{ content:""; display:block; height:0 ; line-height:0; font-size:0; visibility :hidden; clear:both;}
    </style>

4.三列宽度自适应

三列自适应只需要把左右两列的宽度设置成百分比就行了

    <style type ="text/css" >
        *{ padding :0; margin:0;}
        .header,.footer{ height:30px; color:#FFF; background-color :#AAA; line-height:30px; text-align :center; }
        .container{ text-align:center; color :#FFF; }
        .mainBox{ float:left ; width :100%; background-color:#FFF;}
        .mainBox .content{ background-color:#000; margin:0 40% 0 20%;}
        .subMainBox{ float:left; background-color:#666; width :40%; margin-left:-40%;}
        .sideBox{ float:left; background-color:#666; width :20%; margin-left:-100%;}
        .container:after{ content:""; display:block; height:0 ; line-height:0; font-size:0; visibility :hidden; clear:both;}
    </style>

第五章三列和多列布局

猜你喜欢