0

私はこのページを持っています：

    <?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">

    <body>

        <ui:composition template="./template_admin.xhtml">

            <ui:define name="tohead">
            </ui:define>

            <ui:define name="content">


                <p:panel header="Edition d'une commande"  style="height: 490px;" id="panel"  >
                    <p:messages id="msgs"/>
                    <h:panelGrid columns="3" style="float:left;" columnClasses="column" cellpadding="5">

                        <h:outputLabel  for="idd" value="Id : " />   
                        <p:inputText  disabled="true" value="#{editCommandController.myCom.id}" id="idd" required="true" requiredMessage="veuillez saisir un nom" label="Nom"  />  
                        <p:message for="idd" display="icon"/>

                        <h:outputLabel for="dteenvoi" value="Date d'envoi : " />  
                        <p:inputText disabled="true" id="dteenvoi" value="#{editCommandController.myCom.dateEnvoi}" required="true" requiredMessage="veuillez saisir un prénom" label="Prénom" />  
                        <p:message for="dteenvoi" display="icon"/>

                        <h:outputLabel for="division" value="Date de livraison recommandée : " />  
                        <p:inputText disabled="true"  id="division" value="#{editCommandController.myCom.dateLivraisonRecommande}" />  
                        <p:message for="division" display="icon"/>

                        <h:outputLabel for="poste" value="Nombre de page : " />  
                        <p:inputText id="poste" disabled="true" value="#{editCommandController.myCom.nbrePage}" />  
                        <p:message for="poste" display="icon"/>


                        <h:outputLabel for="email" value="Nombre d'exemplaire : " />  
                        <p:inputText id="email" disabled="true" value="#{editCommandController.myCom.nbreExemplaire}" />
                        <p:message for="email" display="icon"/>

                        <h:outputLabel for="autres" value="Type d'impression : " />  
                        <p:inputText id="autres" disabled="true" value="#{editCommandController.myCom.typeImpression}"  />  
                        <p:message for="autres" display="icon"/>

                        <h:outputLabel for="identifiant" value="Observation : " />  
                        <p:inputTextarea id="identifiant" disabled="true" value="#{editCommandController.myCom.observation}" required="true" validator="#{addUserController.validateIdentifiant}" requiredMessage="veuillez saisir un identifiant" label="Identifiant" />  
                        <p:message for="identifiant" display="icon"/>

                        <h:outputLabel for="dec" value="Decision : " />  
                        <p:selectOneMenu  id="dec" value="#{editCommandController.myCom.decision}" >  
                            <f:selectItems value="#{editCommandController.decisions}" />  
                            <p:ajax update="etat gridContainer :myform:alors" event="change" />
                        </p:selectOneMenu>  
                        <p:message for="dec" display="icon"/>

                        <h:outputLabel for="etat" value="Etat : " />  
                        <p:selectOneMenu  id="etat" value="#{editCommandController.myCom.etat}" disabled="#{editCommandController.myCom.decision eq 'rejettée'}" >  
                            <f:selectItems value="#{editCommandController.etats}" />   
                        </p:selectOneMenu>  
                        <p:message for="etat" display="icon"/>

                        <h:outputLabel for="calen" value="Date de Livraison réelle: *" />
                        <p:calendar  label="Date de Livraison reelle" id="calen" showOn="button" effect="slide" value="#{editCommandController.myCom.dateLivraisonReelle}" pattern="MM/dd/yyyy HH:mm" >
                        </p:calendar>  
                        <p:message for="calen" id="msgSurname4" display="icon"/>


                    </h:panelGrid>  

                    <p:outputPanel id="gridContainer" layoyut="block" >
                        <h:panelGrid id="alors"   rendered="#{editCommandController.myCom.decision ne 'rejettée'}" >
                            <p:dataTable id="cars" style="width: 80px;" var="car" value="#{editCommandController.pdm}" paginator="true" rows="10"  
                                         selection="#{editCommandController.selectedPapier}" selectionMode="single" >  

                                <p:ajax event="rowSelect" listener="#{editCommandController.onRowSelect()}"   
                                        update=":myform:jesuis" />  

                                <f:facet name="header">  
                                    RadioButton Based Selection  
                                </f:facet>                    

                                <p:column headerText="libelle">  
                                    #{car.libelle}  
                                </p:column>  

                                <p:column headerText="format">  
                                    #{car.format}  
                                </p:column>  

                                <p:column headerText="stock" >  
                                    #{car.stock}  
                                </p:column>  

                            </p:dataTable>  


                            <h:outputText  id="jesuis" value=" c est la papier : #{editCommandController.selectedPapier.libelle}"  />


                            <h:panelGrid columns="2" cellpadding="5" style="margin-top: 22px;">  
                                <h:outputLabel value="Reliure :" for="city" />
                                <p:selectOneMenu id="city" value="#{addPapierController.choixReliure}">  
                                    <f:selectItem itemLabel="choisir reliure" itemValue="" />  
                                    <f:selectItems value="#{addPapierController.libelleReliures}" />  
                                    <p:ajax 
                                        listener="#{addPapierController.handleCityChange}" />  
                                </p:selectOneMenu>
                            </h:panelGrid>

                        </h:panelGrid>
                    </p:outputPanel>


                    <h:panelGrid columns="2" style="float:none;display: block;" >
                        <p:commandButton value="Editer" ajax="false" action="#{editCommandController.updateCommand()}" update="panel" ></p:commandButton>
                        <p:commandButton value="Annuler"  immediate="true" action="commandesUser" ajax="false" ></p:commandButton>

                    </h:panelGrid>
                </p:panel>  

            </ui:define>

        </ui:composition>

    </body>
</html>

パネルを 3 つの部分に分割したいと思います。最初はページの左側、2 番目はページの右側、3 番目はページの下部です。

1枚目と2枚目はなんとか入れましたが、3枚目は2枚目のすぐ下なので、一番下だけ入れたいと思います

4

1 に答える 1

1

最初のパネルは左にfloat:left;. したがって、DOM 内でその後に続くものは、少なくとも垂直方向のスペースがある限り、その右側に配置されます。要素がこのフロートをエスケープして新しい行になるようにする場合はclear、フロートが必要です。これはfloat:none;、あなたが試みたように行うべきではありません：

<h:panelGrid columns="2" style="float:none;display: block;" >

しかし代わりにclear:left;：

<h:panelGrid columns="2" style="clear:left;" >

display:block;HTMLとして削除したことに注意してください<table>（によって生成された<h:panelGrid>ように、すでにブロックレベルの要素です。

具体的な問題とは関係ありませんが、これは JSF とはほとんど関係ありません。これは単なる HTML コード ジェネレーターです。今後の CSS 関連の質問では、JSF 部分を無視して、生成された HTML 出力のみに集中すると (Web ブラウザーで右クリックしてソースを表示することで見つけることができます)、CSS の専門家にとってより役立つでしょう。CSS の専門家から回答が得られたら、あとは、目的の生成された HTML 出力が得られるように、責任のある JSF コンポーネントを追跡し、それに応じて変更するだけです。

于 2012-09-04T13:39:28.760 に答える