如何并排对齐两个div

-1

我有一个应用程序，其中有两个框，我必须将std代码用作固定电话号码，但我无法并排对齐两个框，这是我的代码plese chk ..如何并排对齐两个div

<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%;

}

来源

2014-09-19 lucifer

我不能并排 – lucifer 2014-09-19 08:52:36

对准两个div一边是文本框超过40％的div更大？ – Pete 2014-09-19 08:55:43

http://jsfiddle.net/36hxcpgt/ – 2014-09-19 09:00:43

删除浮动，并给他们display:inline-block;还添加了小提琴如果u需要更多的帮助

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

来源

2014-09-19 08:53:33 Gho

这是您要求的吗？

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

来源

2014-09-19 10:13:45

如何并排对齐两个div

回答

相关问题