CSS 如何修复<p:panelGrid> 的列宽？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19224716/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to fix the column width of <p:panelGrid>?
提问by kark
I am working on JSF application in that
I am just having a doubt in adjusting the column widthin panelGrid.
我在工作的JSF应用程序
，我只是有在调整列宽疑问的panelGrid。
My code is :
我的代码是：
<p:panelGrid id="grid" columns="2" cellpadding="5" styleClass="panelGrid"
style="border:none;margin:0 auto;width:500px;" >
<p:column style="width:250px">
<h:outputText value="To :" />
</p:column>
<p:column style="width:250px">
<h:outputText value="#{bean.name}" />
</p:column>
<p:column style="width:250px">
<h:outputText value="Address :" />
</p:column>
<p:column style="width:250px">
<p:outputLabel value="#{bean.address}" />
</p:column>
</p:panelGrid>
Here I want to fix the width if first column for 250px, so I mentioned
在这里我想固定宽度，如果第一列为250px，所以我提到
<p:column style="width:250px">
<p:column style="width:250px">
I tried
我试过
- how can I adjust width of <p:column> in <p:panelGrid>?
- How can I change column width of panel grid in PrimeFaces
But it is not working, column width is varying depend upon second column. Can anybody say why it is happening? Or suggest any other way to do this.
但它不起作用，列宽因第二列而异。有人能说为什么会这样吗？或建议任何其他方式来做到这一点。
回答by miroslav_mijajlovic
I suggest you to use both <p:row />and <p:column />as it is described in Showcase. With <p:row />I managed simmilar css problem to work. Like this:
我建议您同时使用<p:row />和 ，<p:column />正如Showcase 中所述。随着<p:row />我管理simmilar的CSS问题的工作。像这样：
<p:panelGrid id="grid" columns="2" cellpadding="5" styleClass="panelGrid" style="border:none;margin:0 auto;width:500px;" >
<p:row>
<p:column style="width:250px">
<h:outputText value="To :" />
</p:column>
<p:column style="width:250px">
<h:outputText value="#{bean.name}" />
</p:column>
</p:row>
<p:row>
<p:column style="width:250px">
<h:outputText value="Address :" />
</p:column>
<p:column style="width:250px">
<p:outputLabel value="#{bean.address}" />
</p:column>
</p:row>
</p:panelGrid>
回答by andolsi zied
It's not very advisable to use fixed width. I suggest you use ui-grid-col css class as described in primefaces showcase .
使用固定宽度不是很可取。我建议您使用 ui-grid-col css 类，如primefaces 展示中所述。
<div class="ui-grid ui-grid-responsive">
<div class="ui-grid-row">
<div class="ui-grid-col-3">
<h:outputText value="To :" />
</div>
<div class="ui-grid-col-3">
<h:outputText value="#{bean.name}" />
</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-3">
<h:outputText value="Address :" />
</p:column>
<div class="ui-grid-col-3">
<p:outputLabel value="#{bean.address}" />
</div>
</div>
