我一直试图这样做而没有太大的成功。
我怎样才能使用yui-grid创建一个像yui-t1这样的模板(左边是一个侧边栏为160px的模板),还有一个右边相同宽度的侧边栏?
中柱应该是液体......
答案 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)
你选择了马修的答案,但他没有回答你的问题。虽然他可能已经解决了你的问题,但是将来读这个问题的人可能仍然想知道答案。在我看来,这种事情使一些人不愿意给出或发展答案。会强迫别人重复这个问题。