css - divのJSF/XHTML/CSS「テーブルビュー」

Question

<div>(...)</div>現在、各値を生成するリストを反復処理しようとしています。これらの div は「ブロック」として表されます (下の画像を参照)。問題は、それらを一列に並べる必要があることです (そのため、新しい行は前の行の最下点から始まります)。

次のように、行ごとにコンテナー div を使用する場合、これは問題になりません。

<div>
    <div>(...)</div>
    <div>(...)</div>
    <div>(...)</div>
</div>
<div>
    <div>(...)</div>
    <div>(...)</div>
    <div>(...)</div>
</div>

コンテナ div を使用したくないのですが、3 つおきのエントリ<ui:repeat>(...)</ui:repeat>を追加するには、内部で特定のロジックを使用する必要があるためです。</div><div>

JSF (またはPrimeFacesまたはTomahawk ) に適切な解決策があることを望んでいるので、これも JSF の下に投稿しています。ただし、単純な CSS トリックで十分であれば、それで十分です。

うまくいけば、あなたはこれで私を助けることができるでしょう.

注:<tr>(...)</tr>上記のコンテナー div と同じ問題に直面するため、テーブルを使用したソリューションは役に立ちません。

Answer 1

テーブルを使用しない意味的な理由はありますか? <h:panelGrid>これは、 と の組み合わせで簡単に実現でき<c:forEach>ます。

<h:panelGrid columns="3">
    <c:forEach items="#{bean.items}" var="item">
        <h:panelGroup>#{item}</h:panelGroup>
    </c:forEach>
</h:panelGrid>

<c:forEach>ビューのビルド時に実行され、物理的に複数のコンポーネントを効果的に生成し<h:panelGroup>て、それぞれが<h:panelGrid>. を使用すると機能しません。これは<ui:repeat>、ビューのレンダリング時にのみ実行され、<h:panelGrid>ビューのビルド時に の単一のセルとして効果的に終了するためです。

<div>テーブルを使用しない強力で有効なセマンティック上の理由がある場合、行を表現するためにコンテナーを適切に回避することはできません。

<div>
    <ui:repeat value="#{bean.items}" var="item" varStatus="loop">
        <h:outputText value="&lt;/div&gt;&lt;div&gt;" escape="false" rendered="#{not loop.first and loop.index % 3 == 0}" />
        <div>#{item}</div>
    </ui:repeat>
</div>

以下も参照してください。

• JSF2 FaceletsのJSTL...理にかなっていますか?
• JSF 2 ui:repeat: div 内の n 項目ごとにグループ化