HTML div-aligning

我正在用HTML和CSS編寫一個網站。對於頁腳，我希望有2個「聯繫」和「地址」對齊的框，其中聯繫框的寬度爲25％，地址框包含其餘部分。不知怎的，我的div不能正確排列，地址框不會與頂部垂直對齊。HTML div-aligning

我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>

Screenshot

來源

2017-07-14 Alexander Tepe

@ fen1x請參閱最新的問題;我們有一個併發編輯。 – msanford

.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即的.kontakt更改代碼以

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

來源

2017-07-14 15:02:38 Dark

就是這樣！謝謝！ –

這是利潤率左接觸塊，比你希望它是，這使得該塊大的。只需刪除邊距（或使其更小）。

.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>

來源

2017-07-14 15:05:08 BernhardWebstudio

.kontakt:margin-left: 28%;強制斷行25％+ 28％+ 70％，超過100％

來源

2017-07-14 15:14:47

事實上，如果你在你的塊中使用的保證金，那麼你必須從其他塊/ html div減少相同數量的寬度。

所以我寧願使用填充代替MARGI n至使兩個多列之間的間距，你必須使用箱大小，同時使用填充。

box-sizing:border-box

來源

2017-07-14 15:35:39

回答

相關問題