我需要用 9 个 YUI 面板构建一个 3 x 3 的页面。
我可以用 YUI 网格构建 3 个 33% 的垂直列。3 个面板出现在三列中。但是,当我在每列中放置 3 个面板(显示在另一个下方)时,它会相互堆叠。我想我应该给 x,y 坐标来对齐它,但是面板高度可能会有所不同,所以我可能需要动态确定 x,y 坐标。
代码有点像这样(在 Django 中使用 - 扩展主页面的子页面将其作为面板内容): -
<div id="doc3">
<div id="bd" role="main">
<div class="yui-gb">
<div class="yui-u first">
{% block panel1 %}{% endblock %}
{% block panel2 %}{% endblock %}
{% block panel3 %}{% endblock %}
</div>
<div class="yui-u">
{% block panel4 %}{% endblock %}
{% block panel5 %}{% endblock %}
{% block panel6 %}{% endblock %}
</div>
<div class="yui-u">
{% block panel7 %}{% endblock %}
{% block panel8 %}{% endblock %}
{% block panel9 %}{% endblock %}
</div>
</div>
</div>
</div>
我渲染使用: -
YAHOO.example.container.panel1 = new YAHOO.widget.Panel("panel1", { width:"390px", visible:true, constraintoviewport:true } );
YAHOO.example.container.panel1.render();
我尝试使用上下文来做一些事情,比如将一个面板与另一个面板的底部对齐,比如给context:["panel1","bl","tl]
应该位于 panel1 下方的面板。但似乎没有帮助。
Any pointers to do this - position YUI panels one below another in a YUI grid?