試圖垂直對齊一個容器div中的兩個浮動div div

Question

我試圖在標題下方浮動兩個div彼此相鄰。我嘗試了內聯塊，但唯一的運氣是讓容器div顯示：table和子div作爲display：table-cell。我可以使用這種方法對齊兩個div，但是現在我在「表格單元格」上方有一個大的邊距或額外的填充。任何解決方案，以消除標題和子divs之間的額外保證金/填充？

如果有一個不使用display：table和display：table-cell的解決方案，我將非常感謝，因爲我只是默認這個，因爲我無法獲得浮動或內聯塊與每個垂直對齊其他。

http://jsfiddle.net/jasonniebauer/GRS2k/

HTML

<div id="owner_headline"> 
    <h3> 
     Owner/Officer Information 
    </h3> 
    <p> 
     Second Owner/Officer (optional) 
    </p> 
</div> 
<div id="owner_info"> 
    <div id="owner_info1"> 
     <label for="owner_name"> 
     Name 
     </label> 
     <input type="text" id="owner_name" placeholder="Name"/> 
     <label for="home_address"> 
     Home Address 
     </label> 
     <input type="text" id="home_address" placeholder="Address"/> 
     <label for="owner_city"> 
     City 
     </label> 
     <input type="text" id="owner_city" placeholder="City"/> 
     <label for="owner_state"> 
     State 
     </label> 
     <input type="text" id="owner_state" placeholder="State"/> 
     <label for="owner_zip"> 
     Zip 
     </label> 
     <input type="text" id="owner_zip" placeholder="Zip"/> 
     <label for="owner_phone"> 
     Phone 
     </label> 
     <input type="text" id="owner_phone" placeholder="Phone"/> 
     <label for="ownership"> 
     Ownership 
     </label> 
     <input type="text" id="ownership" placeholder="Percentage"/> 
     <label> 
     % 
     </label> 
     <label for="ssn"> 
     SSN 
     </label> 
     <input type="text" id="ssn" placeholder="XXX-XX-XXXX"> 
    </div> 
    <div id="owner_info2"> 
     <label for="owner_name2"> 
     Name 
     </label> 
     <input type="text" id="owner_name2" placeholder="Name"/> 
     <label for="home_address2"> 
     Home Address 
     </label> 
     <input type="text" id="home_address2" placeholder="Address"/> 
     <label for="owner_city2"> 
     City 
     </label> 
     <input type="text" id="owner_city2" placeholder="City"/> 
     <label for="owner_state2"> 
     State 
     </label> 
     <input type="text" id="owner_state2" placeholder="State"/> 
     <label for="owner_zip2"> 
     Zip 
     </label> 
     <input type="text" id="owner_zip2" placeholder="Zip"/> 
     <label for="owner_phone2"> 
     Phone 
     </label> 
     <input type="text" id="owner_phone2" placeholder="Phone"/> 
     <label for="ownership2"> 
     Ownership 
     </label> 
     <input type="text" id="ownership2" placeholder="Percentage"/> 
     <label> 
     % 
     </label> 
     <label for="ssn"> 
     SSN 
     </label> 
     <input type="text" id="ssn2" placeholder="XXX-XX-XXXX"> 
    </div> 
</div> 

的CSS

#owner_headline { 
    background-color: #000B84; 
} 

    #owner_headline h3 { 
     background-color: #000B84; 
     padding-left: 7rem; 
     padding-top: .5rem; 
     padding-bottom: .5rem; 
     font-family: "Bank Gothic", serif; 
     font-size: 24px; 
     display: inline-block; 
     color: #FFFFFF; 
    } 

    #owner_headline p { 
     font-family: Arial, sans-serif; 
     font-style: italic; 
     font-size: 17px; 
     font-weight: bold; 
     display: inline-block; 
     padding-top: 0; 
     padding-bottom: 0; 
     float: right; 
     padding-right: .1rem; 
     padding-top: .25rem; 
     margin-right: 1rem; 
     color: #FFFFFF; 
    } 

#owner_info { 
    width: 912px; 
    display: table; 
} 

#owner_info1 { 
    width: 446px; 
    display: inline-block; 
    border: 1px solid black; 
    float: left; 
    display: table-cell; 
} 

#owner_info2 { 
    display: table-cell; 
} 

    #owner_info1 label, 
    #owner_info2 label { 
     font-size: 14px; 
    } 

    #owner_info1 input, 
    #owner_info2 input { 
     display: inline-block; 
     margin-bottom: 1rem; 
    } 

#owner_info2 { 
    margin-left: 1rem; 
    width: 446px; 
    display: inline-block; 
    border: 1px solid black; 
    float: left; 
} 

    #owner_info1 input:nth-of-type(1), 
    #owner_info2 input:nth-of-type(1) { 
     width: 400px; 
    } 

    #owner_info1 input:nth-of-type(2), 
    #owner_info2 input:nth-of-type(2) { 
     width: 344px; 
    } 

    #owner_info1 input:nth-of-type(3), 
    #owner_info2 input:nth-of-type(3) { 
     width: 169px; 
    } 

    #owner_info1 input:nth-of-type(4), 
    #owner_info2 input:nth-of-type(4) { 
     width: 184px; 
    } 

    #owner_info1 label:nth-of-type(4), 
    #owner_info1 label:nth-of-type(6), 
    #owner_info1 label:nth-of-type(9), 
    #owner_info2 label:nth-of-type(4), 
    #owner_info2 label:nth-of-type(6), 
    #owner_info2 label:nth-of-type(9) { 
     margin-left: 1rem; 
    } 

    #owner_info1 input:nth-of-type(5), 
    #owner_info2 input:nth-of-type(5) { 
     width: 173px; 
    } 

    #owner_info1 input:nth-of-type(6), 
    #owner_info2 input:nth-of-type(6) { 
     width: 176px; 
    } 

    #owner_info1 input:nth-of-type(7), 
    #owner_info2 input:nth-of-type(7) { 
     width: 108px; 
    } 

    #owner_info1 input:nth-of-type(8), 
    #owner_info2 input:nth-of-type(8) { 
     width: 190px; 
    } 

Answer 1

試試這個：

HTML：

<div id="owner_headline"> 
    <div> 
     <h3> Owner/Officer Information </h3> 
     <p> 
      Second Owner/Officer (optional) 
     </p> 
    </div> 
    <span style="clear:both;"></span> 
    <div id="owner_info1"> 
     <label for="owner_name"> Name </label> 
     <input type="text" id="owner_name" placeholder="Name"/> 
     <label for="home_address"> Home Address </label> 
     <input type="text" id="home_address" placeholder="Address"/> 
     <label for="owner_city"> City </label> 
     <input type="text" id="owner_city" placeholder="City"/> 
     <label for="owner_state"> State </label> 
     <input type="text" id="owner_state" placeholder="State"/> 
     <label for="owner_zip"> Zip </label> 
     <input type="text" id="owner_zip" placeholder="Zip"/> 
     <label for="owner_phone"> Phone </label> 
     <input type="text" id="owner_phone" placeholder="Phone"/> 
     <label for="ownership"> Ownership </label> 
     <input type="text" id="ownership" placeholder="Percentage"/> 
     <label> % </label> 
     <label for="ssn"> SSN </label> 
     <input type="text" id="ssn" placeholder="XXX-XX-XXXX"> 
    </div> 

    <span style="clear:both;"></span> 

    <div id="owner_info2"> 
     <label for="owner_name2"> Name </label> 
     <input type="text" id="owner_name2" placeholder="Name"/> 
     <label for="home_address2"> Home Address </label> 
     <input type="text" id="home_address2" placeholder="Address"/> 
     <label for="owner_city2"> City </label> 
     <input type="text" id="owner_city2" placeholder="City"/> 
     <label for="owner_state2"> State </label> 
     <input type="text" id="owner_state2" placeholder="State"/> 
     <label for="owner_zip2"> Zip </label> 
     <input type="text" id="owner_zip2" placeholder="Zip"/> 
     <label for="owner_phone2"> Phone </label> 
     <input type="text" id="owner_phone2" placeholder="Phone"/> 
     <label for="ownership2"> Ownership </label> 
     <input type="text" id="ownership2" placeholder="Percentage"/> 
     <label> % </label> 
     <label for="ssn"> SSN </label> 
     <input type="text" id="ssn2" placeholder="XXX-XX-XXXX"> 
    </div> 
</div> 

這是CSS：

body { 
    width: 912px; 
} 
#owner_headline { 
    background-color: #000B84; 
} 

#owner_headline h3 { 
    margin: 0 80px; 
    font-family: "Bank Gothic", serif; 
    font-size: 24px; 
    display: inline-block; 
    color: #FFFFFF; 
} 

#owner_headline p { 
    margin: 0 65px; 
    font-family: "Bank Gothic", serif; 
    font-size: 24px; 
    font-weight: bold; 
    display: inline-block; 
    padding-top: 0; 
    padding-bottom: 0; 
    color: #FFFFFF; 
} 

#owner_info { 
    width: 912px; 
    display: table; 
} 

#owner_info1 { 
    width: 446px; 
    display: inline-block; 
    border: 1px solid black; 
    float: left; 
    display: table-cell; 
} 

#owner_info2 { 
    display: table-cell; 
} 

#owner_info1 label, #owner_info2 label { 
    font-size: 14px; 
} 

#owner_info1 input, #owner_info2 input { 
    display: inline-block; 
    margin-bottom: 1rem; 
} 

#owner_info2 { 
    margin-left: 1rem; 
    width: 446px; 
    display: inline-block; 
    border: 1px solid black; 
    float: left; 
} 

#owner_info1 input:nth-of-type(1), #owner_info2 input:nth-of-type(1) { 
    width: 400px; 
} 

#owner_info1 input:nth-of-type(2), #owner_info2 input:nth-of-type(2) { 
    width: 344px; 
} 

#owner_info1 input:nth-of-type(3), #owner_info2 input:nth-of-type(3) { 
    width: 169px; 
} 

#owner_info1 input:nth-of-type(4), #owner_info2 input:nth-of-type(4) { 
    width: 184px; 
} 

#owner_info1 label:nth-of-type(4), #owner_info1 label:nth-of-type(6), #owner_info1 label:nth-of-type(9), #owner_info2 label:nth-of-type(4), #owner_info2 label:nth-of-type(6), #owner_info2 label:nth-of-type(9) { 
    margin-left: 1rem; 
} 

#owner_info1 input:nth-of-type(5), #owner_info2 input:nth-of-type(5) { 
    width: 173px; 
} 

#owner_info1 input:nth-of-type(6), #owner_info2 input:nth-of-type(6) { 
    width: 176px; 
} 

#owner_info1 input:nth-of-type(7), #owner_info2 input:nth-of-type(7) { 
    width: 108px; 
} 

#owner_info1 input:nth-of-type(8), #owner_info2 input:nth-of-type(8) { 
    width: 190px; 
} 

[CSS中心垂直於2浮起的div]（的