制作三列布局,使用yui-grid固定侧边栏

时间:2009-05-25 18:43:57

标签: css yui-grids

我一直试图这样做而没有太大的成功。

我怎样才能使用yui-grid创建一个像yui-t1这样的模板(左边是一个侧边栏为160px的模板),还有一个右边相同宽度的侧边栏?

中柱应该是液体......

5 个答案:

答案 0 :(得分:1)

你可以试试这个liquid layout吗?

答案 1 :(得分:1)

您可以调整和扩展此示例。这是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;
}

答案 2 :(得分:0)

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

答案 3 :(得分:0)

您是否尝试过使用YUI网格布局http://developer.yahoo.com/yui/examples/grids/grids-gb_source.html

然后在第二个yui-u上添加一个名为.main的额外课程,或者在第三个yui-u上添加一个.last课程。

您可以添加以下覆盖样式

.yui-gb .yui-u {
width: 19%;
}

.yui-gb .main {
  width: 59%;
}

获得宽度为19/59/19的3个cols

对你有用吗?

答案 4 :(得分:0)

你选择了马修的答案,但他没有回答你的问题。虽然他可能已经解决了你的问题,但是将来读这个问题的人可能仍然想知道答案。在我看来,这种事情使一些人不愿意给出或发展答案。会强迫别人重复这个问题。