新手JSF问题 - 如何实现这种布局？答案

【问题标题】：newbie JSF question - How to achieve this layout?新手JSF问题 - 如何实现这种布局？
【发布时间】：2011-01-12 02:13:32
【问题描述】：

我正在尝试实现此处显示的布局

每个面板都应该链接到一个支持 bean，稍后我将根据上下文添加不同的组件。

我尝试使用 panelgrid，但无法实现这种外观。我宁愿只使用 JSF，但如果不可能或太复杂，RichFaces 也可以。

谢谢！！

【问题讨论】：

标签： jsf layout richfaces

【解决方案1】：

这不仅仅是 JSF/HTML 的问题，也是 CSS 的问题。上面的布局基本上已经可以实现如下：

<h:panelGroup id="header" layout="block"></h:panelGroup>
<h:panelGroup id="leftcol" layout="block"></h:panelGroup>
<h:panelGroup id="rightcol" layout="block"></h:panelGroup>

（生成以下 HTML）

<div id="header"></div>
<div id="leftcol"></div>
<div id="rightcol"></div>

您可以使用 CSS 设置样式/位置，如下所示：

#header {
    width: 100%;
    height: 100px;
}
#leftcol {
    width: 200px;
    float: left;
}
#rightcol {
    float: left;
}

就是这样。

【讨论】：

不客气。但是，当您想要比三个单独的空白部分更进一步时，就会有更多的画面。例如。背景颜色、边框等。但这至少应该让你开始:)

【解决方案2】：

您可以使用实现上述布局的 HTML 代码。即

<table>
   <tr>..</tr>
   <tr>..</tr>
</table>

但是，无表布局是首选 - 即使用 <div> 标签。 (see here)

【讨论】：

谢谢，我没有得到 div+panelgroup 解决方案。你能举一个最小的例子或引导我到一个链接吗？
这是 HTML+CSS 的问题，而不是 JSF。对于简单的布局，根本不要使用 JSF。如果布局中有条件部分 - 即有时出现的侧边栏，那是另一个问题。但是你的布局看起来很简单，所以使用纯 HTML+CSS
好的，知道了。谢谢。还有一个问题 - 为什么首选无表布局？