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

Question

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

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

中心柱应该是液体...

Answer 1

您可以尝试一下液体布局吗？

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

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

Answer 4

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

Answer 5

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

，然后在第二个 yui-u 上添加一个名为 .main 的额外类或 .last< 类/code> 到第三个 yui-u。

您可以添加以下覆盖样式

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

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

来获得宽度为 19/59/19 的 3 列，

这对您有用吗？