Question

大家好我想对齐两个div（一个右边有30％宽度，一个左边有70％）。我搜索了很长时间但没有任何工作。我希望有一个人可以帮助我。

我正在使用primefaces 3.5和jsf 2.1，我使用jQuery的e primefaces主题。

这是我的模板：

<ui:composition 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" template="/META-INF/templates/template.xhtml">

    <ui:define name="content">
        <p:panelGrid columns="2" columnClasses="verticalAlignTop,verticalAlignTop">
            <p:panel id="panelTemplContSplitLeft" styleClass="left"
                style="border-radius: 13px 13px 13px 13px;
                       -moz-border-radius: 13px 13px 13px 13px;
                       -webkit-border-radius: 13px 13px 13px 13px;
                       border: 2px solid #080808;
                       background: #fcfcfc; width: 350px; ">
                <ui:insert name="contentLeft">
                    <h:outputLabel value="This is default Content Left" />
                </ui:insert>
            </p:panel>

            <p:panel id="panelTemplContSplitRight" styleClass="right"
                style="border-radius: 13px 13px 13px 13px;
                       -moz-border-radius: 13px 13px 13px 13px;
                       -webkit-border-radius: 13px 13px 13px 13px;
                       border: 2px solid #080808;
                       background: #fcfcfc; width:800px;">
                <ui:insert name="contentRight">
                    <h:outputLabel value="This is default Content Right" />
                </ui:insert>
            </p:panel>
        </p:panelGrid>
    </ui:define>
</ui:composition>

这是我的theme.css

的一部分

.verticalAlignTop { vertical-align: top; }

.right {
    width: 70%;
    margin-left: auto;
    margin-right: 1em;

    right: 0px;
}

.left {
    width: 30%;
    margin-left: 1em;
    margin-right: auto;
}

Answer 1

问题：计算以下标记的宽度，它们将是＆gt; 100％，所以你的div不会在一行中对齐

.right {
    width: 70%; /*this is a width */
    margin-left: auto;/*this is a width */
    margin-right: 1em;/*this is a width */

    right: 0px;/* why do you have this when you dont have "position" attribute?*/
}

.left {
    width: 30%;/*this is a width */
    margin-left: 1em;/*this is a width */
    margin-right: auto;
}

demo

解决方案：

.right {
    width: 60%; /* either reduce this  */
    margin-left: auto;/*or remove these */
    margin-right: 1em;/*or remove these */
    display:inline-block; /*added*/
}

.left {
    width: 25%;/* either reduce this  */
    margin-left: 1em;/*or remove these */
    margin-right: auto;/*or remove these */
    display:inline-block; /*added*/
}

demo

CSS对齐和宽度与百分比

1 个答案: