Jquery CSS对齐和宽度与百分比

嗨，伙计们，我想对齐两个div（一个右30%宽，一个左70%）。我找了很长时间，但什么也没找到。我希望有人能帮助我

我使用的是PrimeFaces3.5和JSF2.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>

---

问题：计算下面标记的宽度，它们将>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;
}

解决方案：

.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*/
}

---

您的div是否显示为内联块、表格单元格或浮动，或者不显示这些内容。如果只是块，则如果我从panelGrid中删除宽度组件，它们将堆叠为块。在这里你可以看到一张图片：好的，你的宽度+填充+边距不应该超过100%，这里你有30+70+边距，超过100%sry，但什么都没有改变。我真的很讨厌CSS为什么什么都没有改变；（@bvb1909:2

div

s并排显示是需要安排的吗？@bvb1909:come-chat使用下面的linklet-us

.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*/
}