layout.css

/*
 * 定义alimm的常用布局
 * @module     layout
 * @title    常用布局样式
 * @desc    提供常用的弹性布局，流体布局，固定宽度布局等，包括预定义的header、footer等
 */

/* 基础布局组 */
/* @group basic layout */

    /*
     * 基础布局, thanks yaml.
     *
     * |—————————–|
     * | #header                     |
     * |—————————–|
     * | #col1  | #col3      | #col2 | <— #main
     * | 200px  | flexible   | 200px |
     * |        |            |       |
     * |—————————–|
     * | #footer                     |
     * |—————————–|
     *
     */
    
    #header{
        position: relative;
    }
    
    /* 列容器#main */
    #main{
        clear: both;
        width: auto;
    }
    
    /* 左列，默认的宽度是200 Pixel */
    #col1{
        float: left;
        width: 200px;
        z-index: 3;
    }
    
    /* 右列，默认的宽度是200 Pixel */
    #col2{
        float: right;
        width: 200px;
        z-index: 5;
    }
    
    /* 居中自适应 */
    #col3{
        width: auto;
        margin: 0 210px;
        z-index: 1;
    }
    
    #col1_content{ z-index: 4; }
    #col2_content{ z-index: 6; }
    #col3_content{ z-index: 2; }
    
    /* IE5.x, IE6 */
    #col1_content, #col2_content, #col3_content{ position: relative; }
    
    #footer{
        clear: both;
        display: block;
    }
    
    /*
     * 基础布局的列切换样式，thanks yaml
     * 
     * .hideboth    ->    单列布局 single-column-layout (使用#col3)
     * .hideleft    ->    两列布局，sidebar在右 2-column-layout (使用#col2和#col3)
     * .hideright    ->    两列布局，sidebar在左 2-column-layout (使用#col1和#col3)
     * .hidenone    ->    三列布局 show all columns
     */
    .hideboth #col1, .hideboth #col2{ display: none; }
    .hideboth #col3{
        margin-right: 0;
        margin-left: 0;
    }
    
    .hideleft #col1{ display: none; }
    .hideleft #col3{
        margin-left: 0;
        margin-right: 200px;
    }
    
    .hideright #col2{ display: none; }
    .hideright #col3{
        margin-left: 200px;
        margin-right: 0;
    }

/* @end */

/* 区块布局模板 */
/* @group block layout templates */

    /*
     * 固定宽度的布局
     * 将容器的样式设置为static-layout即可
     * 
     * |—————————–|
     * | .scol1 | .scol3    | .scol2 | <— container.static-layout
     * | 200px  | flexible  | 200px  |
     * |        |           |        |
     * |—————————–|
     *
     */
     
     /* 列容器.static-layout */
    .static-layout{
        clear: both;
        width: auto;
    }
    
    /* 左列，默认的宽度是200 Pixel */
    .static-layout .scol1{
        float: left;
        width: 200px;
        z-index: 3;
    }
    
    /* 右列，默认的宽度是200 Pixel */
    .static-layout .scol2{
        float: right;
        width: 200px;
&
#160;       z-index: 5;
    }
    
    /* 居中自适应 */
    .static-layout .scol3{
        width: auto;
        margin: 0 200px;
        z-index: 1;
    }
    
    .scol1 .scol1_content{ z-index: 4; }
    .scol2 .scol2_content{ z-index: 6; }
    .scol3 .scol3_content{ z-index: 2; }
    
    /* IE5.x, IE6 */
    .scol1_content, .scol2_content, .scol3_content{ position: relative; }
    
    .hideboth .scol1, .hideboth .scol2{ display: none; }
    .hideboth .scol3{
        margin-right: 0;
        margin-left: 0;
    }
    
    .hideleft .scol1{ display: none; }
    .hideleft .scol3{
        margin-left: 0;
        margin-right: 200px;
    }
    
    .hideright .scol2{ display: none; }
    .hideright .scol3{
        margin-left: 200px;
        margin-right: 0;
    }

    /*
     * 自适应宽度的布局
     * 在容器内直接应用区块布局模板进行区块布局
     * 将容器的样式设置为block-layout，容器内的列可以是以下预设值：
     *
     * left        | right
     * ———————–
     * 50%         | 50%
     * 25%      | 75%
     * 33.333%  | 66.666%
     * 38.2%    | 61.8%
     * 66.666%  | 33.333%
     * 70%      | 30%
     * 75%      | 25%
     * 61.8%    | 8.2%
     *
     */
    
    .block-layout{
        width: auto;
        overflow: hidden;
    }
    
    /* 预设列定义 */
    .c50l, .c25l, .c30l, .c33l, .c38l, .c66l, .c70l, .c75l, .c62l{ float: left; }
    .c50r, .c25r, .c30r, .c33r, .c38r, .c66r, .c70r, .c75r, .c62r{
        float: right;
        margin-left: -5px;
    }
    
    .c50l, .c50r{ width: 50%; }
    .c25l, .c25r{ width: 25%; }
    .c30l, .c30r{ width: 30%; }
    .c33l, .c33r{ width: 33.333%; }
    .c38l, .c38r{ width: 38.2%; }
    .c66l, .c66r{ width: 66.666%; }
    .c70l, .c70r{ width: 70%; }
    .c75l, .c75r{ width: 75%; }
    .c62l, .c62r{ width: 61.8%; }
    
    /* 预设列内容容器样式 */
    .blc{ padding: 0 0.5em; }
    .blcl{ padding: 0 0 0 0; }
    .blcr{ padding: 0 0 0 0; }

/* @end */

.align-right{
    text-align: right;
}

.align-center{
    text-align: center;
}