css - コンテナー div で 2 つのフローティング div を垂直方向に揃えようとしています

Question

見出しの下に 2 つの div を並べて表示しようとしています。私はインラインブロックを試しましたが、私が持っていた唯一の運は、コンテナ div を display: table にし、子 div を display: table-cell として作成することです。この方法を使用して 2 つの 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;
    }

score 0 · Accepted Answer

これを試して：

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 - コンテナー div で 2 つのフローティング div を垂直方向に揃えようとしています

1 に答える 1

Related

Reference