1

我一直试图做到这一点，但没有取得多大成功。

我怎样才能使用 yui-grids 制作像 yui-t1 这样的模板（左侧边栏为 160px 的模板），但右侧边栏也有相同宽度？

中心柱应该是液体...

4

5 回答 5

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;
}
于 2009-08-25T17:32:08.870 回答
1

你可以试试这种液体布局吗？

于 2009-05-26T02:32:18.717 回答
0

你选择了马修的答案，但他没有回答你的问题。尽管他可能已经解决了您的问题，但将来阅读此问题的人可能仍想知道答案。在我看来，这种事情会阻止一些人给出或制定答案，并会迫使其他人重复这个问题。

于 2009-07-09T22:07:35.847 回答
0

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

但是然后在第二个 yui-u 上添加一个额外的类，.main或者.last在第三个 yui-u 上添加一个类。

您可以添加以下覆盖样式

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

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

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

那对你有用吗？

于 2009-05-26T14:55:20.447 回答
0

根据这个页面，180px 宽的右侧边栏具有默认类 yui-t4。我假设你可以进入 CSS 并将这个像素值更改为 160。

于 2009-05-25T19:16:14.230 回答