Question

我有一个应用程序，我有两个盒子，我必须使用std代码的固定电话号码，但我不能并排对齐两个盒子这是我的代码plese chk ..

<div class="row">

    <label for="lbl-01"><bean:message key="tml.registration.label.landNumber"/><span class="formElementRequired">* </span> +91</label>
    <div class="phcontainer">
        <div class="phleft"><html:text property="landLineNumber" styleId="landLineNumberId" styleClass="text" maxlength="11"/></div>
        <div class="phright">yep</div>
    </div>       

    <font class="help_text">Max. 11 characters</font>
        <div class="errorDivClass"> 
        <%--<logic:messagesPresent property="landLineNumber">
                <font color="red"><html:errors property="landLineNumber" /></font>
            </logic:messagesPresent> --%>
        </div>  
</div>

这是我的css

   .phcontainer {
 /*  width: 80%; */
 overflow: hidden;

 }
.phleft, .phright {
 float: left;
 /* width: 40%; */
 margin: 0 5%;

}

Answer 1

删除浮动，如果你需要更多帮助，给他们display:inline-block;添加一个小提琴

.phleft, .phright {
   margin:0 5%;
   display:inline-block;
}

Answer 2

这是你需要的吗？

HTML

<div class="div_a">
      <p>Contact Name:</p>
      <p>Peter</p>
      <p>John  </p>
    </div>
    <br />
    <div class="Div_b">
        <p>Number:</p>
        <p>555-6052</p>
      <p>555-6021  </p>
    </div>

CSS

.div_a {
    color: #333;
    width: 150px;
    height: 150px;
    float: left;
    background-color:#069;
    color: #FFF;
    padding-left:15px;
}
.Div_b {
    color: #036;
    background-color:#333;
    height: 150px;
    width: 150px;
    position:absolute;
    margin-left:175px;
    color: #FFF;
    padding-left:15px;
    margin-top:-18px;
}

Demo JSFIDDLE

如何并排排列两个div

2 个答案: