これらのブロックが同じ高さで整列していないのはなぜですか？

Question

目指す

0期待

現在

同じ高さにフラグとタグを整列するには私はこのfiddleでそれを修正した

コード

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

。 フラグ画像にコンテナを追加するだけで済みます。float: right;