爲什麼這些塊不在同一高度上對齊？

Question

目的

要對齊標誌和標籤上的相同高度

當前

預計

代碼

HTML

<div> 
    <h1> 
    {{ title }} 
    </h1> 
    <p> 
    {{ body }} 
    </p> 
    <a href="#"> 
    <img id=dutchFlag (click)="setLang('nl')"> 
    <img id=ukFlag (click)="setLang('uk')"> 
    </a> 
</div> 

CSS

#buttons { 
    float:left; 
    padding:17px 40px 0 0; 
} 

#flag { 
    float:right; 
    padding:17px 40px 0 0; 
} 

#dutchFlag { 
    background: url(../images/dutch-flag-50.jpg) no-repeat top right; 
    height: 48px; 
    margin: 4px; 
    display: block; 
} 

#ukFlag { 
    background: url(../images/uk-flag-50.jpg) no-repeat top right; 
    height: 48px; 
    margin: 4px; 
    display: block; 
} 

Answer 1

我已經在這個fiddle固定它。 您只需將容器添加到旗幟圖像並使用float: right;