HTML div-aligning

Question

私はHTMLとCSSでウェブサイトを作成しています。フッタの場合、「連絡先」と「住所」の2つのボックスが整列され、25％の幅の連絡ボックスと残りのアドレスボックスが配置されています。どういうわけか、私のdivは正しく整列されません、アドレスボックスは、上に垂直に配置されません。

マイattmept：

.footer { 
 
    margin-top: 5px; 
 
    width: 100%; 
 
    border: 1px solid black; 
 
} 
 

 
.anschrift { 
 
    width: 25%; 
 
    padding: 5px; 
 
    display: inline-block; 
 
    border-right: 1px solid black; 
 
    border-bottom: 1px solid black; 
 
    vertical-align: top; 
 
} 
 

 
.kontakt { 
 
    width: 70%; 
 
    margin-left: 28%; 
 
    display: inline-block; 
 
    padding: 4px; 
 
    vertical-align: top; 
 
}

<div class="footer"> 
 
    <div class="anschrift"> 
 
    <h2> 
 
     Anschrift: 
 
    </h2> 
 
    <h3> 
 
     Lorem ipsum... 
 
    </h3> 
 
    </div> 
 
    <div class="kontakt"> 
 
    <h2> 
 
     Kontakt: 
 
    </h2> 
 
    <h3> 
 
     Lorem ipsum... 
 
    </h3> 
 
    </div> 
 
</div>

Answer 1

.footer { 
 
    margin-top: 5px; 
 
    width: 100%; 
 
    border: 1px solid black; 
 
} 
 

 
.anschrift { 
 
    width: 25%; 
 
    padding: 5px; 
 
    display: inline-block; 
 
    border-right: 1px solid black; 
 
    border-bottom: 1px solid black; 
 
    vertical-align: top; 
 
} 
 

 
.kontakt { 
 
    width: 70%; 
 
    display: inline-block; 
 
    padding: 4px; 
 
    vertical-align: top; 
 
    float:right; 
 
}

<div class="footer"> 
 
    <div class="anschrift"> 
 
    <h2> 
 
     Anschrift: 
 
    </h2> 
 
    <h3> 
 
     Lorem ipsum... 
 
    </h3> 
 
    </div> 
 
    <div class="kontakt"> 
 
    <h2> 
 
     Kontakt: 
 
    </h2> 
 
    <h3> 
 
     Lorem ipsum... 
 
    </h3> 
 
    </div> 
 
</div>

トン左余白を削除し、フロート彼は.kontakt右にDIVすなわちそれはあなたがそれを可能にするよりも、ブロックが大きくなり、コンタクトブロックのマージン左だ

.kontakt { 
    width: 70%; 
    display: inline-block; 
    padding: 4px; 
    vertical-align: top; 
    float:right; 
} 

Answer 2

に.kontaktのコードを変更します。マージンを取り除く（または小さくする）。

.footer { 
 
    margin-top: 5px; 
 
    width: 100%; 
 
    border: 1px solid black; 
 
} 
 

 
.anschrift { 
 
    width: 25%; 
 
    padding: 5px; 
 
    display: inline-block; 
 
    border-right: 1px solid black; 
 
    border-bottom: 1px solid black; 
 
    vertical-align: top; 
 
} 
 

 
.kontakt { 
 
    width: 70%; 
 
    //margin-left: 28%; 
 
    display: inline-block; 
 
    padding: 4px; 
 
    vertical-align: top; 
 
}

<div class="footer"> 
 
    <div class="anschrift"> 
 
    <h2> 
 
     Anschrift: 
 
    </h2> 
 
    <h3> 
 
     Lorem ipsum... 
 
    </h3> 
 
    </div> 
 
    <div class="kontakt"> 
 
    <h2> 
 
     Kontakt: 
 
    </h2> 
 
    <h3> 
 
     Lorem ipsum... 
 
    </h3> 
 
    </div> 
 
</div>

Answer 3

.kontakt:margin-left: 28%; 25％+ 28％+ 70％はあなたのブロックにマージンを使用する場合は、あなたがする必要がある、実際には100％以上

Answer 4

あるとして改行を強制的に他のblocks/html divから同じ量の幅を減らす。

だから私はあなたのパディングを使用している間ボックスのサイズ変更を使用する必要があり、複数の列の2との間の間隔を作成する代わりに、マルギ n個の使用パディングすることを好みます。

box-sizing:border-box