// 两栏自适应（表格）
.col2(
    table,
    @align: top,
    @width,
    @offset: 0, // 两栏间隔
    @left: '>:first-child',
    @right: '>:nth-child(2)') {

    @left_selector: e(@left);
    @right_selector: e(@right);

    display: table;
    table-layout: fixed;

    @{left_selector} {
        display: table-cell;
        vertical-align: @align;
        .set-width(@width);
    }
    @{right_selector} {
        display: table-cell;
        vertical-align: @align;
        padding-left: @offset;
    }
}

.col2-r(
    table,
    @align: top,
    @width,
    @offset: 0, // 两栏间隔
    @left: '>:first-child',
    @right: '>:nth-child(2)') {

    @left_selector: e(@left);
    @right_selector: e(@right);

    display: table;
    table-layout: fixed;

    @{left_selector} {
        display: table-cell;
        vertical-align: @align;
        padding-right: @offset;
    }
    @{right_selector} {
        display: table-cell;
        vertical-align: @align;
        .set-width(@width);
    }
}

// 两栏自适应（浮动）
.col2(
    float,
    @height: auto,
    @width,
    @offset: 0, // 两栏间隔
    @left: '>:first-child',
    @right: '>:nth-child(2)') {

    @left_selector: e(@left);
    @right_selector: e(@right);

    .clear();
    @{left_selector} {
        float: left;
        .set-width(@width);
        .set(height, @height);
    }
    @{right_selector} {
        display: block;
        width: auto;
        .set(height, @height);
        margin-left: @width + @offset;
    }
}

// 由于右栏固定并为浮动元素，因此右栏在文档树中必须位于左栏前面
.col2-r(
    float,
    @height: auto,
    @width,
    @offset: 0,
    @left: '>:nth-child(2)',
    @right: '>:first-child') {

    @left_selector: e(@left);
    @right_selector: e(@right);

    .clear();
    @{left_selector} {
        display: block;
        width: auto;
        .set(height, @height);
        margin-right: @width + @offset;
    }
    @{right_selector} {
        float: right;
        .set-width(@width);
        .set(height, @height);
    }
}

// 两栏自适应（绝对定位）
// 每一栏的高度为 100%，要求父元素必须有自己的高度
.col2(
    position,
    @height: auto,
    @width,
    @offset: 0,
    @left: '>:first-child',
    @right: '>:nth-child(2)') when not (@width = float) {

    @left_selector: e(@left);
    @right_selector: e(@right);

    @{left_selector} {
        .position(0 auto 0 0);
        .set-width(@width);
    }
    @{right_selector} {
        display: block;
        width: auto;
        .set(height, @height);
        margin-left: @width + @offset;
    }
}

.col2-r(
    position,
    @height: auto,
    @width,
    @offset: 0,
    @left: '>:first-child',
    @right: '>:nth-child(2)') when not (@width = float) {

    @left_selector: e(@left);
    @right_selector: e(@right);

    @{left_selector} {
        display: block;
        width: auto;
        .set(height, @height);
        margin-right: @width + @offset;
    }
    @{right_selector} {
        .position(0 0 0 auto);
        .set-width(@width);
    }
}


// 三栏自适应（表格）
.col3(
    table,
    @align: top,
    @left_width,
    @right_width,
    @left_offset: 0,
    @right_offset: 0,
    @left: '>:first-child',
    @middle: '>:nth-child(3)',
    @right: '>:nth-child(2)') {

    @left_selector: e(@left);
    @middle_selector: e(@middle);
    @right_selector: e(@right);

    display: table;
    table-layout: fixed;

    @{left_selector} {
        display: table-cell;
        vertical-align: @align;
        .set-width(@left_width);
    }
    @{middle_selector} {
        display: table-cell;
        vertical-align: @align;
        padding-left: @left_offset;
        padding-right: @right_offset;
    }
    @{right_selector} {
        display: table-cell;
        vertical-align: @align;
        .set-width(@right_width);
    }
}

// 三栏自适应（浮动）
// 由于左右栏固定并为浮动元素，因此左右栏在文档树中必须位于中间栏前面
.col3(
    float,
    @height: auto,
    @left_width,
    @right_width,
    @left_offset: 0,
    @right_offset: 0,
    @left: '>:first-child',
    @middle: '>:nth-child(3)',
    @right: '>:nth-child(2)') {

    @left_selector: e(@left);
    @middle_selector: e(@middle);
    @right_selector: e(@right);

    .clear();
    @{left_selector} {
        float: left;
        .set-width(@left_width);
        .set(height, @height);
    }
    @{middle_selector} {
        display: block;
        width: auto;
        .set(height, @height);
        margin-left: @left_width + @left_offset;
        margin-right: @right_width + @right_offset;
    }
    @{right_selector} {
        float: right;
        .set-width(@right_width);
        .set(height, @height);
    }
}

// 三栏自适应（绝对定位）
.col3(
    position,
    @height: auto,
    @left_width,
    @right_width,
    @left_offset: 0,
    @right_offset: 0,
    @left: '>:first-child',
    @middle: '>:nth-child(2)',
    @right: '>:nth-child(3)') when not (@left_width = float) {

    @left_selector: e(@left);
    @middle_selector: e(@middle);
    @right_selector: e(@right);

    @{left_selector} {
        .position(0 auto 0 0);
        .set-width(@left_width);
    }
    @{middle_selector} {
        display: block;
        width: auto;
        .set(height, @height);
        margin-left: @left_width + @left_offset;
        margin-right: @right_width + @right_offset;
    }
    @{right_selector} {
        .position(0 0 0 auto);
        .set-width(@right_width);
    }
}