css - 网格布局与CSS？

Question

我正在尝试使用 CSS 创建某种网格布局:

有一个内容 div，分为 2 列:main + right。

现在我有两种元素。我总是希望这些元素并排对齐。

所以我有这样的事情:

#outerPanel{
 width:100%; 
 float:right; 
 position:relative; 
  }

#rightcol{
 width:35%; 
 float:right; 
 position:relative; 
 }

#maincol{
 float: left; 
 position: relative; 
 width:65%; 
 }

和我的 index.xhtml:

    <p:panel id="outerPanel">

            <h:panelGroup id="maincol">
                <ui:include src="table1.xhtml" />
            </h:panelGroup>
            <h:panelGroup id="rightcol">
                <ui:include src="input1.xhtml" />
            </h:panelGroup>

            <h:panelGroup id="maincol">
                <ui:include src="table2.xhtml" />
            </h:panelGroup>
            <h:panelGroup id="rightcol">
                <ui:include src="input2.xhtml" />
            </h:panelGroup>


    </p:panel>

当然这只对第一次出现的 id 有效，因为不允许重复使用 id。但这显示了我正在尝试做的事情。我还能如何设置它？

谢谢

Answer 1

Of course this does only work for the first occurrence of the id's, as one is not allowed to reuse the id.

只需使用 class 而不是 id。

<h:panelGroup styleClass="maincol">
    ...
</h:panelGroup>
<h:panelGroup styleClass="rightcol">
    ...
</h:panelGroup>

<h:panelGroup styleClass="maincol">
    ...
</h:panelGroup>
<h:panelGroup styleClass="rightcol">
    ...
</h:panelGroup>

与

.rightcol {
    ... 
}

.maincol {
    ...
}