Question

大家好我正在寻找方法来获得像这张图片的页面 the hope

没有横幅（只有部分之后）我已经测试了关于样式垂直对齐，顶部和类似这样的东西的所有问题，并且没有一个对我有用，所以如果有人有任何解决方案，它将会更加重要并且谢谢你

这就是我的页面实际上看起来像（代码）

<!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:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui">

<h:head>
<style>
.className td{
    vertical-align: top;
}
</style>
<style>
.panelGridCenter {
    margin: 0 auto;
}
</style>
</h:head>
<body>

    <ui:repeat var="offre" value="#{offreBean.offres}" varStatus="status">
        <h:link id="offre" value="#{offre.profilPrincipal}"
            fragment="#{offre.id}" />
        <br></br>
    </ui:repeat>
    <p:panelGrid columns="2" styleClass="classeName" style="display:block" >
        <ui:repeat var="offre" value="#{offreBean.offres}" varStatus="status">

            <span id="#{offre.id}"> 


            <h:panelGrid columns="2"
                    style="width:600px" >

                    <h:outputLabel value="Profil Principal : " />
                    <h:outputText value="#{offre.profilPrincipal}" />
                    <h:outputLabel value="Mission : " />
                    <h:outputText value="#{offre.mission}" />
                    <h:outputLabel value="Profil : " />
                    <h:outputText value="#{offre.profil}" />
                    <h:outputLabel value="Specificite du Poste : " />
                    <h:outputText value="#{offre.speceificitePoste}" />
                    <h:outputLabel value="Niveau Etude : " />
                    <h:outputText value="#{offre.niveauEtude}" />
                    <h:outputLabel value="Experience Mini : " />
                    <h:outputText value="#{offre.niveauExperienceMin}" />
                    <br></br>

                </h:panelGrid>


            </span>
        </ui:repeat>
        <h:panelGrid columns="2"  >
            <h:outputLabel value="Profil Principal" />
            <h:inputText value="#{offreBean.profil}" />
            <h:outputLabel value="Contrat" />
            <p:selectOneMenu value="#{offreBean.offres}"
                converter="ContratConverter">
                <f:selectItem itemLabel="Choisir Contrat :" />
                <f:selectItems value="#{offreBean.contrats}" var="contrat"
                    itemValue="#{contrat}" itemLabel="#{contrat.contrat}" />
            </p:selectOneMenu>
            <h:outputLabel value="Categorie" />
            <p:selectOneMenu value="#{offreBean.categorieoffres}"
                converter="CategorieConverter">
                <f:selectItem itemLabel="Choisir Categorie :" />
                <f:selectItems value="#{offreBean.categorieoffres}" var="categorie"
                    itemValue="#{categorie}" itemLabel="#{categorie.categorie}" />
            </p:selectOneMenu>
            <h:outputLabel value="Mots Clés" />
            <h:inputText value="#{offreBean.motclé}" />

            <p:commandButton value="Chercher" />
        </h:panelGrid>
    </p:panelGrid>
</body>
</html>

Answer 1

首先添加：

    <h:head>
        <style>
    .className td {
        vertical-align: top;
    }
    </style>
</head>

和

<h:panelGrid columns="2" id="container" styleClass="className"
        style="display:block;">

并清理tomcat工作目录，清理浏览器缓存，它就像魅力一样!!!!

对齐另一个PanelGrid中的PanelGrid

1 个答案: