Css 制作三列布局，使用yui网格使用边栏固定

一、 我一直试图这样做，但没有多大成功

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

---

中心列应为液体…

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

您可以尝试使用此选项？

您尝试过使用YUI网格布局吗

但在第二个yui-u上添加一个名为

.main

的额外类，或在第三个yui-u上添加一个

.last

类

您可以添加下面的覆盖样式

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

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

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

---

那对你有用吗？

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

你可以修改并扩展这个例子。以下是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>

---

我可以这样做，但问题是我需要两个侧边栏和yui-t4只制作正确的侧边栏你不能同时使用它们吗？如果创建两个div，一个类为yui-t1，另一个类为yui-t4，会发生什么情况？我不熟悉YUI。哦，对不起，不，你想要一个流体主柱，所以忽略回答这似乎是“真正的”holygrail，我正在测试它，它似乎在IE8中也能工作非常感谢我的朋友我也在寻找使用YUI CSS的解决方案；我尝试了上述方法，但没有效果。我使用doc3和yui-t4（固定右列）尝试了上述方法。这看起来是一个很好的方法，但是，左列并没有如预期的那样出现；这产生了两列布局，而不是三列。

.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;
}