尝试垂直对齐容器 div 中的两个浮动 div答案

【问题标题】：Trying to vertically align two floated divs in a container div尝试垂直对齐容器 div 中的两个浮动 div
【发布时间】：2013-11-11 17:07:31
【问题描述】：

我正在尝试在标题下方浮动两个相邻的 div。我尝试过 inline-block，但我唯一的运气是让容器 div 显示：table，子 div 显示为：table-cell。我可以使用这种方法对齐两个 div，但现在我在“表格单元格”上方有很大的边距或额外的填充。有什么解决方案可以消除标题和子 div 之间的额外边距/填充？

如果有不使用 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;
    }

【问题讨论】：

CSS center vertically in 2 floated divs的可能重复
很难理解你在问什么。你能告诉我问题是什么吗？所以我可以帮你。
空格是由于您的标题中的段落因空间不足而被下推造成的。使标题与表格一样宽。
问题是当我试图让 div 彼此相邻浮动时，它们没有垂直对齐......并且“右侧”div 与左侧 div 不平行。我必须使用 to table 让两者垂直对齐，但是我遇到了边距/填充问题。
边距/填充问题在哪里？至尊元素

标签： css html css-float vertical-alignment

【解决方案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;
}

【讨论】：