如何並排對齊兩個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

回答

相關問題