制作三列布局，并使用yui-grids固定边栏

Question

我一直在尝试这样做，但没有太多成功。

我如何使用yui-grids创建一个像yui-t1这样的模板(左边的侧边栏是160px的那个)，同时在右边也有一个同样宽度的侧边栏？

中间的柱子应该是液体的。

Answer 1

你可以试试这个liquid layout吗？

Answer 2

您可以对此示例进行调整和扩展。以下是200px固定/流动内容/布局预设列的HTML：

<div id="bd">
    <div id="yui-main">
        <div class="yui-b yui-b1">
            <div class="yui-u-main">
                <div class="yui-u">
                    <p>Main column: fluid width</p>
                </div>
            </div>
            <div class="yui-u">
                <p>Left column: 200px fixed</b>
            </div>
        </div>
    </div>
    <div class="yui-b">
        <p>Third column: fixed width, follows template preset.</p>
    </div>
</div>

CSS很简单，如下所示：

.yui-b1 .yui-u-main {
    float: left;
    width: 100%;
}
.yui-b1 .yui-u {
    float: left;
    /* Width of left column */
    width: 200px;
    margin-left: -100%;
}
.yui-b1 .yui-u-main .yui-u {
    float: none;
    width: auto;
    /* Width of left column + 13px margin (default YUI margin) */
    margin-left: 213px;
}

Answer 3

根据this page的说法，180px宽的右侧边栏有默认的类yui-t4。我假设您可以进入CSS并将此像素值更改为160。